The parallax-scrolling plug-in with fading effect

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.

javascript parallax scrolling

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.

Author - Atiq Zia

Atiq is the writer at jquery-az.com, an online tutorial website started in 2014. With a passion for coding and solutions, I navigate through various languages and frameworks. Follow along as we solve the mysteries of coding together!