4 modern background tricks to try out
Waves of particles
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.