The light-weight parallax scrolling plug-in, only 1Kb JavaScript file, enables creating the parallax effect in the header with fading.
This JavaScript based plug-in is simple to use where you need to specify the background image in the CSS file while the front image in the markup. A few CSS classes need to be referred in the container and that’s it.
Demo
Developer page Download plug-in
How to setup this parallax plug-in on your website?
Download the plug-in from the above link and place the scroll.js and style.css in the <head> section of your web page.
<link rel=”stylesheet” type=”text/css” href=”css/parallax-scrolling/style.css”/>
<script type=”text/javascript” src=”js/parallax-scrolling/scroll.js”></script>
Use the markup as shown in the demo below.
An example of parallax with fading effect in header
Click on the image or link below to open the demo page and scroll down to see the parallax effect. You can also see the fading effect as you scroll down.
See online demo and code
The background image for the parallax is set in the CSS file:
#header__background {
background-image: url("../images/background.jpg");
background-size: cover;
background-position: center;
width: inherit;
height: inherit;
display: table;
will-change: transform;
}
Whereas, the front image is specified in the markup:
<div id="header"> <div id="header__background"> <div id="header__centered"> <img src="images/face-parallax.jpg"/> <h1>Parallax Scrolling</h1> </div> </div> </div>
You can also see, a few CSS classes used e.g. header, header__background, and header__centered.
