See the Pen Animated Bokeh Lava Lamp Canvas by smpnj ( Frosted UI Background by George Francis

This snippet utilizes vanilla JavaScript and HTML canvas to create a silky-smooth background. Here it’s used to great effect as dots come in and out of focus – similar to a lava lamp. The bokeh style is often associated with photography. They’re prime examples of how a bit of CSS and JavaScript can add flair to previously-static features. Today, we’ll explore animated backgrounds that run the gamut in terms of looks and use cases. If anything, this demonstrates the flexibility afforded to designers. It all depends on the purpose behind the element. That’s not to say an animated background can’t be loud or even obnoxious. Rather, they’re utilized to create mood and enhance aesthetics. Animated backgrounds, for example, often forego the bells and whistles seen within a site’s content. Movement compels users to focus on a specific element – such as a button or an image.īut animation can also be used in more subtle ways. In web design, animation is often used as a way to draw attention.

Dynamic background