Simple fixed background parallax effect in vanilla js.

Simple Parallax

Simple fixed background parallax effect in vanilla js.

See demo on Codepen.

JS

Initialise the plugin. The first argument identifies the parrallax class.

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('para',8);

HTML

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

CSS

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