Parallax Scrolling

Parallax Scrolling is becoming more common in website designs. It can be implemented through HTML and CSS, and can become more complex with the addition of JavaScript and other coding languages.

Websites that have parallax scrolling can be created to look clean and simple or more detailed and complex.

Porsche Evolution

Porsche Evolution

Many companies including Apple use or have used parallax scrolling combined with other movements to give a unique experience when on their website. Adding parallax scrolling and other effects allows the website to stand out and keep the content interesting.

Timing is important and it adds another element of interest. It can be used to keep the visitors focus on the website and spark curiosity.

Prosche went above and beyond with parallax scrolling on their website by adding music to give a more meaningful experience.

Valaire

Valaire

The code itself can look difficult at first but it simply uses different containers and background images. W3Schools has examples that are easy to follow at www.w3schools.com.

Different effects can be added to the code to make it more complex. You can change the opacity of different layers, add video, add animations, add movement to images and text as scrolling, add blurring as scrolling, or even popups as scrolling.

Parallax scrolling is not limited to only vertical scrolling but can also be implemented into horizontal scrolling.

Fire Watch Game

Fire Watch Game

There can be some issues with parallax scrolling. If coded incorrectly it could affect the websites layout to the point of the visitor leaving the website.

Mobile phones may not be compatible with parallax scrolling and this can cause a problem in the layout. Parallax scrolling can be turned off or changed through media queries.

The amount of code required depends partially on the amount of sections that are moving. If there is a lot of code for many pieces, it will take time for the website to load. If the visitor has a slower internet connection then it make take quite a while to load or not load at all.


Some Examples of Websites with Parallax Scrolling:

Fire Watch Game
Fillet
Tomerlerner
Erosbalazs
Hello Monday
New York Times Project
Porsche Evolution
Dave Gamache
Assemble
Anton and Irene
Alquimia WRG
Valaire