Particle Animation
Particle animation is one of the most popular choices right now. Loads of websites has successfully adopted this elegant cosmos-inspired solution. It works well in combination with plain solid color canvas, illustration, vector drawings, and even photos. Moreover, the animation varies. It can be a bundle of chaotically moving dots that are scattered throughout the entire page to imitate starry sky or rain of stars, or constellation-themed solution where you can connect circles with thin lines. And that’s not all; sometimes it is paired with the effects triggered by mouse hover events: in this case, you are able to drive the particles away, form swirls from them, attach them to cursor as a trail, etc. Huub is an example of the typical particles animation. It features a neat moving cluster of dots that goes perfectly well with a dark coloring and a map placed on the back. Use your mouse cursor to have some fun. Tip: If you want to get to grips with the Huub’s dynamic header background, then you should take a look at the project created by Dominic Kolbe called mouse parallax demo. It looks almost the same. But if you need an immediate solution then JavaScript library by Vincent Garreau that is called Particles.js is what you're looking for.Waves of particles
Whereas in the previous example, the effect can be achieved with the clever manipulations with HTML5 and CSS3 and a pinch of JavaScript magic, this one is an ingenious experiment with Three.js library. With its arched forms and smooth ripple-like movements, it easily reminds one of small tides. It creates a feeling of a breathing canvas. You can use the mouse cursor to rotate it in different directions, exploring it both horizontally and vertically. StuurMen has a simple, refined “welcome” section. It is minimal, clean, and exquisite. The content unobtrusively enters the field of view while the pulsating background establishes a right mood for the project. Tip: Here you can find an original script by ThreeJS and its successful adaptation by Deathfang with a demo called three.js canvas - particles – waves.Mouse hover parallax
Layered parallax is another growing trend. Along with particle animation, it can transform a dull static background into a composition with a subtle 3D feeling. The great thing is that you do not have to ditch your favorite image choice, just use parallax to spruce it up a bit. It is pretty beneficial when you need to liven up the title, logotype, surreal scene, or illustration. It is also suitable for various abstract animations. Triggered by standard mouse hover event, it not only adds another dimension, but also allows the users to play with the environment. The personal portfolio of Alexandre Rochet has an outstanding splash page. Not only does the behavior catch the eye, but also mouse hover parallax makes the letters shift. Tip: There are numerous libraries and viable code snippets for generating parallax. One of the most popular is a plugin created by Matthew Wagerfield called Parallax.js. However, if you need to see it in practice, especially applied to the typography, then you can explore a pen by Frontnerd that features his take on a 3d parallax on the mouse.WebGL experiments
WebGL experiments are, of course, a variant for sophisticated hardened developers and clients with a generous budget. They can be brilliant, awe-inspiring, and a bit pompous. It’s worth every penny. However, there is always a fly in the ointment. With great power comes great responsibility, and with WebGL you should never forget about the amount of resources that it consumes, and the lack of full browser compatibility. Solarin is all about an unforgettable and mind-blowing user experience. It is a 3D WebGL experiment that is rich in numerous exciting and innovative features. The header background is a huge futuristic sphere that responds to the mouse cursor and creates a tremendous impression. Tip: While to imitate what geniuses in MediaMonks have done is fiendishly complicated, on the Web, you can always find a starting point that will give you food for thought. Consider the WebGL API, and this codepen from Yoichi Kobayashi who has come up with a project called “The wriggle sphere”.Conclusion
Whereas utilization of images and videos is a time-proven and less painful way to prettify the background, there are still other promising and experimental options that can obtain the desired result. Staying away from the banalities is challenging and even money-consuming, but these measures are justified and pretty reasonable. Whether it is a simple yet elegant particles animation or remarkable WebGL experiment it injects new life into a core detail of the interface, giving your website a head start.Nataly Birch
Read Next
3 Essential Design Trends, May 2024
Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…
How to Write World-Beating Web Content
Writing for the web is different from all other formats. We typically do not read to any real depth on the web; we…
By Louise North
20 Best New Websites, April 2024
Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…
Exciting New Tools for Designers, April 2024
Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…
How Web Designers Can Stay Relevant in the Age of AI
The digital landscape is evolving rapidly. With the advent of AI, every sector is witnessing a revolution, including…
By Louise North
14 Top UX Tools for Designers in 2024
User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…
By Simon Sterne
What Negative Effects Does a Bad Website Design Have On My Business?
Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…
10+ Best Resources & Tools for Web Designers (2024 update)
Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…
By WDD Staff
3 Essential Design Trends, April 2024
Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…
How to Plan Your First Successful Website
Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…
By Simon Sterne
15 Best New Fonts, March 2024
Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…
By Ben Moss
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff