4 modern background tricks to try out
October 27, 2016
It seems that, as a constituent of a design, backgrounds live in the shadows; however, that’s not entirely true. In times when CSS only began to make its first steps towards the world conquest, the background had already taken on the role of the main decorative element of the website.
Nowadays the situation has not changed drastically. In most cases, it serves as a primary visual driving force that makes an important contribution to the general theme.
Traditionally, photos and videos are first choices for a backdrop. The fact is that they are simply overpopulated hero sections: every other website greets the online audience with either image-based or film-based backdrop. And that makes the Web (and your interface in particularly) pretty alike resulting in anticipated user experience.
Let’s look at them:
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.
Waves of particles
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 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”.
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.