Implementation of Parallax Effect in Drupal
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.
Download Scroll Reveal and enable it.
Download scrollReveal.js from Scroll Reveal GitHub and save /libraries/scrollreveal/scrollReveal.js.
Go to admin page /admin/config/user-interface/scrollreveal and create the elements you wish fade when entering viewport.
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