Simple fixed background parallax effect in vanilla js

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.

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.

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

Related