AgencyUK Tech Team: Parallax Scrolling Websites

Web
Website Eye tracking research UX UI

Our Tech Team here at AgencyUK have a lot to say about technology. This post is the first in a series delivered by our Tech Team to provoke discussion and opinion on all things Tech, so get involved!

One of the hottest web design trends nowadays is parallax scrolling, which involves independently moving backgrounds and foregrounds, 3D animation and cool effects as the user browses the page. If used well and sparingly it can offer an innovative and dynamic user experience.

The first parallax website was created in 2011 for Nike (Nike Better World) but since then, the approach has been developed and implemented in countless sites (some better than others), with some notable examples.

There are essentially two different methods of implementing parallax effects; firstly, the layer method, which features several backgrounds that can move independently of one another, as the user scrolls through the page. One such example is the Spotify website: https://www.spotify.com/uk/

Secondly, there is the repeating pattern or animation method, whereupon different objects can be made to float over a repeating background layer; these objects are animated as the user scrolls up or down. One very interesting benefit of this technique is that the page and any floating objects can move in any direction triggered by scrolling. A great example and very well executed is HotDot: http://hotdot.pro/en/

Here are a few other great examples of parallax websites:

– Sweez (http://www.sweez.com.br/)
– Costa Coffee (http://www.costa.co.uk/experience/)
– Living World (http://www.livingword.co.uk/)
– Health Service Payouts (http://www.expresssolicitors.com/assets/nhs-payout-timeline.html)
– Shape (http://madebyshape.co.uk/method)

If you’ve got any more examples of parallax being used to great effect (or any examples of how not to do it!) hit us up on twitter @gencyuk.