Parallax Scrolling

https://i1.wp.com/upload.wikimedia.org/wikipedia/commons/8/82/TWW_parallax_scrolling_sample_1.jpg

 

Parallax scrolling is a scrolling technique used within computer generated 2D environments which allows for images to be moved at different speeds depending on where they are located in relation to the camera or view port, giving the impression of depth.

The idea behind parallax scrolling is that images (or objects in the real world) that are closer to the camera or view port move faster and those that are further away move slower, as shown in the animated .gif from Wikipedia below:

Parallax.gif

You can picture parallax scrolling as multiple 2D planes layered over top of each other in a 3D space (as like in the image at the start of the post) with each moving at a different percentage of the scrolling speed.

Parallax scrolling techniques are used quite often in 2D Video Game Development, and now with HTML5, CSS3, jQuery  and Javascript are beginning to be used more often in website design as well.

Lunar Revel is an awesome website for an event on an Video Game that I play called League of Legends that utilities parallax scrolling.

Advertisements
Comments
One Response to “Parallax Scrolling”
  1. gregc132 says:

    Good work – need some more personal ones like this

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: