Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.

The parallax effect has been around for years in classic video games, but it became a trend in the web design world relatively recently. This cool effect is now commonly seen as part of the scrolling feature of a web page.

A simple way to create and maintain how elements fade in, triggered when they enter the viewport.

Step 1.

Download Scroll Reveal and enable it.

Step 2.

Download scrollReveal.js from Scroll Reveal GitHub and save /libraries/scrollreveal/scrollReveal.js.

Step 3.

Go to admin page /admin/config/user-interface/scrollreveal and create the elements you wish fade when entering viewport.

Step 4.

To add parallax effect click on New Element

Valid jQuery selector: Is a valid jQuery identification of the element that will receive the fade effect. ex- If you want the effect in header area then put the id or class od header in Valid jQuery selector like #header_area or .header_area

Enter: Controls the origin of the animation.

Over: is the duration of the animation.

After/Move: Is time before the reveal starts.

Now click Save configuration