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.
<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.