Simple fixed background parallax effect in vanilla js

by Posted on

simple and ultralight JavaScript plugin that applies a subtle parallax scroll effect to the fixed background image.

Libraries

Put the JavaScript file simpleparallax.js at the end of the document.

<script src="simpleparallax.js"></script>



CSS

Add a fixed background image to the container. Note that the container height must be lower than the image height.

#parallax-1{
    background-image: url('../img/myimage.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    height: 400px;
    width: 100%;
}



HTML

Create a container element where the parallax background image will appear.

<section id="parallax-1"></section>

Js

Initialise the plugin. The first argument identifies the parrallax id.
The second is the modifier it controls the parallax distance. It is defined as a fraction of the total page height and is used to animate the background image position on scroll.

simpleParallax('#parallax-1',8);

See live demo and download source code.

DEMO | DOWNLOAD

This awesome plugin is developed by piersrueb. Visit their official github repository for more information and follow for future updates.


Published by admin