Parallax scrolling in HTML5

Parallax scrolling example scene

Example of parallax scrolling (by OhSqueezy)

The parallax scrolling is an effect applied to an image to make it move slower or faster than the other images. This effect is very popular in the 2D games, to create a feeling of deepness : when an image goes faster, you think that this image is closer than the rest of the page, if it goes slower, you will think that it is further.

But let’s put that in a web page context: when you scroll down a web page, all the elements go up at the same time and you have the feeling to “go down” in the web page. If an element goes up slower or faster than the others, this is parallax scrolling.

Demo of the parallax scrolling in HTML5

Move up and down this page, you will see that the image goes up and down inside this container!

To understand this demo of parallax scrolling in HTML5

HTML5 Parallax

Scheme of the parallax done in this tutorial.

The following code snippets will help you to easily integrate a parallax effect in your web page. It will calculate the movement of the image based on the movement of the container inside the browser window. If the container is at the top of the window, the image top will be seen in the container. If the container is at the bottom of the window, the image bottom will be seen in the container.

Source code for parallax scrolling in HTML5

About Nicolas Form

I’m Nicolas Form, multi-skill programmer, aesthete and joyful French guy. On this blog I share my tips and tutorials about programming and IT in general. I am freelance, so you can also contact me about a website, an Android app or any other software you need. Check my portfolio and drop me a line!

This entry was posted in Web. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *


*


Web

Parallax scrolling in HTML5

by Nicolas Form time to read: 3 min
0