When designing a website, animation is often utilised to grab users’ interest. Users are more likely to pay attention to a button or an image that is moving.
However, animation may also be used in a more understated fashion. In contrast to the bells and whistles often found in a site’s content, animated backdrops, for instance, tend to eschew such extras. They serve more of an aesthetic purpose, though, in setting the appropriate tone.
That doesn’t rule out the possibility of a really annoying animated backdrop, however. It’s important to consider the element’s intended function. This, if anything, shows the leeway given to designers.
Different in style and function, we’ll examine a wide range of animated backdrops today. These are excellent illustrations of the ways in which some CSS and JavaScript may be used to spice up otherwise static elements.
Bokeh Background Animation by smpnjn
A common association is between photography and the bokeh aesthetic. This technique is put to excellent use here, with the dots fading in and out of focus like lava in a lamp. This code sample makes use of HTML canvas and standard JavaScript to provide a seamless backdrop.
See the Pen Animated Bokeh Lava Lamp Canvas by smpnjn (@smpnjn) on CodePen.
User Interface Background with Frost Effect by George Francis
See the Pen Generative UI – Orb Animation [pixi.js] + Frosty Elements ❄️ by George Francis (@georgedoescode) on CodePen.
The effect is similar, but not quite as pronounced, with this backdrop. Also, the “frosted” UI in the front works well with this, since the orbs’ transparent, glass-like container allows you to view them float peacefully below. The animation is generative as well, meaning that it changes randomly according to predetermined parameters.
GoodKatz’s Simple CSS Wave Background
This is a very specific use of a moving backdrop. These soft waves, created using CSS, serve to demarcate the hero section from the rest of the page. It might serve as an engaging introduction that doesn’t throw consumers for a loop.
See the Pen Simple CSS Waves | Mobile & Full width by Goodkatz (@goodkatz) on CodePen.
CSS Animated Gradient Background by Andrew
Andrew’s Animated CSS Gradient Backgrounds are beautiful and eye-catching. They stand out without detracting from a page’s primary content. The colours of this radial gradient are gradually changing.
See the Pen CSS animated background by Andrew (@chickenroyal) on CodePen.
George Brook’s Animated Seamless Text in CSS
An element’s visual impact may be greatly increased by using CSS background-clip. With this code snippet, you can give your header text a festive, scrolling backdrop.
See the Pen CSS Seamless Animated Text by George Brook (@georgebrook) on CodePen.
Pure CSS Animated Background by Mohammad Abdul Mohaiman
Background Animation Made With Only CSS (by Mohammad Abdul Mohaiman)
To what extent an animated backdrop is user-friendly depends greatly on how quickly it loads. While the headline may twist and swirl as it scrolls slowly across the screen, it is still easily readable. When superimposing text on top of an animation, a more sedate pace is recommended.
See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.
Author: Dhruve Shah, Chapter XI: Conceptual Framework
This cool hexagonal design is perfect for that modern touch. Using jQuery, outlined objects animate in and out, looking something like growing cells under a microscope. It’d work well either as a hero section or a footer for the site.
See the Pen XI Concepts Background by Dhruve Shah (@dhruveonmars) on CodePen.
Josie Barker’s Animated SVG Background
This last clip cleverly employs a few of the aforementioned techniques all at once. Color gradients are in flux, and so are the softly evolving forms. Because of SVG and CSS, everything works faultlessly. It looks as well on a mobile viewport as it does on a desktop, which is a major plus.
See the Pen SVG animated background by Josie Barker (@weenabeana) on CodePen.
Highlight your backgrounds.
Animated backgrounds are a simple method to make your website more engaging to your audience. They may help you create an engaging visual and user experience whether you use them for the whole page or just one piece.
But before rushing into implementation, it’s important to think through the consequences. In a perfect world, animation would contribute to your site’s objectives rather than detract from them. Accessibility and usability are crucial considerations. Keep your specific requirements in mind when you make your decision.
TOGGLE BETWEEN LIGHT AND DARK THEMES WITH THESE 8 CSS & JAVASCRIPT NICHES
10 TOP PROGRAMS FOR REMOVING MINIFICATION FROM CSS FOR CLEANER LAYOUT
MORE THAN 50 FREE HTML5 AND CSS3 LOGIN FORMS
Image by rawpixel.com on Freepik