Parallax

Parallax is a term used to describe an effect that gives the perception of life-like distance and motion using a kind of two-dimensional animation. This is accomplished by changing the scrolling speeds of different elements on a webpage to create the illusion of distance while viewing a fixed point.

CSS Parallaxing

The CSS Method is one of two methods you can choose for your parallax effect. You can probably guess what is happening just by testing this method out on your site. It is referred to as the CSS Method because it only uses CSS to create the effect. This method uses CSS to fix the background image in place while the other elements on the page scroll normally. This gives the impression that the content is moving in front of the background image.

Here is an example of CSS Parallax, notice how the image remains in the same loaction in the background while the window that you see the image through moves. This is due to the line of code:

Background-attachment: fixed

True Parallax

The second method is called True Parallax. It is called “True” probably because it exemplifies the conventional idea of the parallax effect. This method uses CSS and JavaScript to create a slightly slower scrolling movement than the other elements on the page. This is a more life-like representation of movement because of the perception of distance it creates between the slow moving image in the background and the faster moving elements in the forefron

Here is an example of True Parallax, notice how the image still moves with the amount you’ve scrolled, just at a reduce rate. This is because the image is not attached to the page, but to the module that it is located within.