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

March 8th 2013

1. layout

2.  hints 

a-iphone 4s – We first met Siri

b-iphone 4 – This changes everything again

c-Android – galaxy

d-iphone 5 – the lightest iphone ever

L-blackberries – logo

e-Nexus 7 – google play

f-new ipad – retina display tablet

k-ipad mini – every inch an ipad

 

-Macbook – (browser)

-iMac – (browser)

-Windows – (browser)

 

 

– IE – (none) bonus

– Opera – an opera house

g– Firefox – a red fox

– Google chrome – a browser logo with combination of red yellow green and blue

– Safari – compass

 

riddles  (the answer must be words or number)

(riddles are not related to clues)

15 riddles at least

 

3. set several group user names 

input username

input answer

show the result of right answer amount

4. we can see the whole process of this game (like a sitemap) only on IE brower

it is considered as the homepage.

Fluid grid draft

Birth of Responsive web design

With the popularity of 3G and Wifi, more and more people start to using mobile phones, iPad or other mobile devices to surf on the Internet. Thus, web designers have to face a dilemma: how to show the same page on different screen sizes?

For example, phones have small screens, and the width is usually less than 600 pixels; PC has big screen, which is up to more than 1000 pixels generally, and some are 2000 pixel even. It is not easy to show same content on different screen sizes with a satisfied effect

The solution for many websites is that providing different pages for different devices. For instance, specializing in providing a mobile version, a iPhone version or iPad version. Although doing this way can guarantee the results, it leads to more trouble to maintain several versions, and even will greatly increase the complexity of the architecture design if a website has several portals. Also, in spite of working in one website version from one portal, the content cannot appear in a satisfied way when we change the window size.

Therefore, it has been envisaged since very early whether we can design once for universally application, which means one page can adapt to different screen sizes automatically, and automatically adjust the layout according to the width of the screen.

In 2010, Ethan Marocotte came up with the word “ Responsive web design”, which also named “ Adaptive web design”. It refers to the web design that can automatically identify the width of the screen and make the appropriate adjustments.

He produced an example for a hypothetical magazine, which contains the six roles’ headshots. (d.alistapart.com/responsive-web-design/ex/ex-site-flexible.html) If the screen is larger than 1300 pixels wide, six pictures will lie side by side in a row. If the screen width ranges between 600 pixels and 1300 pixels, the layout of six pictures will change into two lines. If the screen width ranges from 400 pixels to 600 pixels, the navigation bar will move to the top of the page. If the screen width is smaller than 400 pixels, six images will move into three rows. (Use www.benjaminkeen.com/open-source-projects/smaller-projects/responsive-design-bookmarklet/ to test)

Fluid Grid – One of the Three Major Elements in RWD

  • What is fluid grid?

Fluid grid is one of the three necessary elements in responsive web design (the other two are media queries and flexible image). Fluid grid requires that page elements use relative units (such as percentage or EM), rather than absolute units (such as pixels).

This idea came from Ethan Marcotte. When writing code, Ehtan Marcotte realized that, whenever a complex grid has been designed to meet customer demands, customers, as well as the client user, always required a fluid layout. However, at that time, almost all of the grid-based designs are fixed width strictly. So he thought to build fluid grid.  The idea is to use the relative size, combined with the percentages and EM, to get corresponding width by simple segmentation, which is same as the pixel width in fixed-width design.

  • Fluid grid VS fixed grid

Fluid grid is created through the intelligent usage of div, percentages and simple mathematical calculations. Fixed layout has a fixed-width container, and each inside module is also width fixed rather than percentage. Importantly, the container cannot be moved. No matter how the visitor screen resolution is, the pages display the same width as other visitors. Compared with the fixed grid layout, the main part of the fluid grid layout is set with a percentage width, so it can be automatically adaptive to the various screen resolutions of users.

However, many designers still prefer fixed grid layout, because it has a lot of advantages. In terms of design, fixed grid layout is easier to customize, and there will be no trouble of pictures, forms, videos, and other fixed width content, because it has the same width in all browsers. Moreover, it does not need min-width or max-width in fixed grid, so all the browsers can support it. Nevertheless, it will leave a big blank in fixed-width layout for users who use the high resolution screens; also, the vertical scroll bar and horizontal scroll bar will appear when the screen resolution is too small.

Fluid grid layout just can overcome this defect of the fixed grid layout. The blank area around the pages is same in all screen resolutions and browsers in fluid grid layout, leading to a more beautiful visual appearance. If the design is appropriate, it also can avoid horizontal scroll bar appears in a small screen resolution. In addition, for the users, fluid grid layout looks more friendly because it is automatically adaptive to users’ settings.

Of course, compared with the fixed grid, fluid grid also has some drawbacks. For instance, in the fixed grid layout, we can ensure what the designers see is that the users see; however, in the fluid grid layout, it is hard for designers to control the users seeing, and may ignore some errors, because the layout looks fine in designers screen resolution. Besides, in the particularly large resolution, the content will be stretched into a very long line, and becomes difficult to read.

How could Fluid Grid Work?

In order to overcome some problems in the fluid grid layout, we can use simpler design. The less fluid layout depends on pictures and difficult technology, the easier it is for the production and maintenance. Use simpler design and code, the compatibility issues can be better prevent, detect and resolved.

In addition, in order to allow the fluid layout has fixed-width when the screen resolution is very large or very small, to avoid the page being too large or small to read, we can use min-width and max-width.

Some Fluid Grid Layout Design Examples

Example design by Ethan Marcotte

Dustycartridge.com

Palantir.net

Dressresponsively.com

Simplebits.com

A simple and clear responsive web

The simple responsive web that I put in the playground is

playground.ace.ed.ac.uk/~dmsp_amys/Ming/dmsp1/Untitled-7.html

The tutorial I read is

www.netmagazine.com/tutorials/build-basic-responsive-site-css

As talking in this tutorial, media queries are very important in making a responsive web.

During this experience, I met two problems. One is about the sentence “Sip to Main Content”, I don’t know why it does not appear in the tutorial’s example web. As the code writing in the html, I think it should appear.

Another is about the Head picture “Demo”. I think “Demo” is set as a background picture, so I make a new “Demo” picture by Photoshop, but I cannot put it in the right place, even though I adjust its size.