Parallax Scrolling

Parallax Scrolling

 

Introduction  

In recent years, the word “Parallax Scrolling” becomes increasingly more popular in the web design, and has gradually become a trend of web design. (King D., 2013) This amazing visual effect first appeared in Nike Better World in 2011, and since then widely in use.  (Joe, 2011) It is usually a long web page, in a storytelling way, to show a complex process to users and allowing users to feel as if they are in it, rather than the monotonously dull design. It uses some stunning illustrations and graphics, and use parallax scrolling effect by moving multi-layer at different speeds, to form a 3D motion effects, bring pretty good visual experience.

In this essay, I will discuss the concepts and features of parallax scrolling effect firstly, and then talk about the long page website, which is related closely to the parallax scrolling effect. After that, there will be several examples of gorgeous parallax scrolling websites. At last but not least, it will state some tips about building a parallax-scrolling web.

Concepts and Features

There are no exactly definitions of Parallax Scrolling. So, according to experience of several parallax scrolling website, the concept and features can be summarized as following.

The “parallax scrolling” effect about refers to a multilayer background moving at different speeds, forming the 3D motion effect, in order to bring a great visual experience.

Based on personal experience, I think it has several distinctive features.

First of all, it usually applies to a single web page. Secondly, to form a parallax scrolling effect, it needs that setting those elements on the page hierarchically to make them scroll independently. Besides, parallax-scrolling web contains both vertical scrolling and horizontal scrolling. In addition, parallax-scrolling web always has long webpage.

Parallax Scrolling and Scrolling Long Page

In submission 2, our entire webpage was designed into such a parallax scrolling effect, but in my opinion, to be honest and strict, I personally think that our website cannot be regarded as parallax scrolling page – although it was designed in accordance with the principle of parallax scrolling, but it did not show a parallax scrolling effect as setting different scrolling speed for different layers. However, it did achieve the effect and principles of scrolling long page, which is still classified as parallax scrolling website technically.

Take Kentisbury Grange and The World’s Highest Website for example:

Source: www.kentisburygrange.co.uk/

 

Source: worlds-highest-website.com/

About the reason why use long page, Tunde Corkshott (2012) explained that it is related to “aspects of user psychology and behavioral economics”. Users need automotive site, with the constraint of retaining the existing visual design and the reuse of existing content. (Corkshott T., 2012) Human’s foraging and anchoring behaviors can explain it. Website designers and users always have different perspectives when they acquire information from the website. Designers do know available information in it, while unfortunately users often get information from illogical way in designers’ sight, and they easily miss sections or cannot find helpful tools and functions to guide them. The reason is that they do not explore more, but only get information within few areas they are familiar with; even other aspects have better sources or more available tools. This behavior is similar to “hunter-gatherer tribes or foraging animals” – regarding information as nourishment they need. Users require to know “where they are, what they can achieve, and there are other options available on the site that will meet their needs”. (Corkshott T., 2012)

Furthermore, parallax-scrolling page mixes emotional and rational content together, rather than traditional way – set emotional content, images, or video galleries and then give access to the details. It simplifies the navigation and provides a more interactive user interface. (Corkshott T., 2012)

10 Examples

Here I would like to show some excellent examples of parallax-scrolling web.

1. iutopi

Source: www.iutopi.com/

2. Bowtie

Source: bowtieperiod.com/

 

3. These are things

Source: www.thesearethings.com/

4. Parallax Scrolling Tutorial – Smashing Magazine

Source: richardshepherd.com/smashing/parallax/background.html

 

5. Lost World’s Fairs

Source: lostworldsfairs.com/atlantis/

6. Ben the bodyguard

Source: benthebodyguard.com/index.php

 

7. Paramount Farms

Source: paramountfarms.com/#processing

 

8.Kinetic V5

Source: www.kinetic.com.sg/main.html

9. Like There is no Tomorrow

Source: www.like-there-is-no-tomorrow.com/

10. Hexaedro

Source: www.hexaedro.eu/#index.php?locale=pt_PT

 

Tips for Building Parallax Scrolling Website

As long page website becoming a fad, digital specialists give up some tips for designers.

Firstly, Make it responsive or at least mobile friendly. Parallax scrolling web design becomes more and more mature, but it still cannot be used widely on mobile devices. People use mobile to connect the Internet very often currently, mobile web usage also became a trend, so that it should be considered to broad the utilization of parallax scrolling on mobile devices. Secondly, make it fun. Thanks to the storytelling style, parallax scrolling often brings users some entertainments by take users on a journey through a timeline or story.  Thirdly, add layering and depth. It is important to clarify the different layers, which need different speeds. “The art of parallax is about creating an illusion of depth. Remember to experiment and not to give up” (Chan J, 2013). Fourthly, do not forget pre-loading assets. Parallax scrolling websites tend to involve pretty heavy utilization of imagery and multimedia assets. (Chan J, 2013)

Conclusion

I started to get engaged in web design since this school year. During the Christmas holiday, I learned and discussed web design together with my friends and got to know about this kind of website formwork. I am attracted by its unique design of the UI experience and fresh style. This creative web design effect gives a smooth and gorgeous animation shock to large extent, making users indulge in the wonderful operation design and impress by the designer’s inspiration of construction.

Parallax scrolling web design becomes more and more popular. Its design and implementation both needs to be deeply researched and practiced a lot for me.

 

Reference

Joe (2011), Experiments with Scrolling Effects since Nike “Better World”, Design. Available at www.publicreative.com/blog/design-2/2011/07/experiments-with-scrolling-effects-since-nike-better-world/

Cockshott T. (2012), Why the Long Page? Tech-the week in technology.net Available at: www.netmagazine.com/opinions/why-long-page

King D. (2013) 15 Web Design Trends for 2013. Slideshare.  Available at: www.slideshare.net/davidleeking/15-web-design-trends-for-2013

Chan J. (2013) Build a Parallax Scrolling Website: 10 Pro Tips. Available at: www.creativebloq.com/web-design/parallax-4132336