Author: | erikengervall |
---|---|
Views Total: | 891 views |
Official Page: | Go to website |
Last Update: | October 13, 2021 |
License: | MIT |
Preview:

Description:
Vanilla-Parallax.js is a pure vanilla JavaScript library which lets you apply high performance, hardware accelerated and responsive parallax scrolling effects to web content.
How to use it:
Include both Vanilla-Parallax.js and Vanilla-Parallax.css on the webpage.
<link rel="stylesheet" href="vanilla-parallax.css"> <script src="vanilla-parallax.min.js"></script>
Add your parallax images to a container using para-
attributes as follows:
- para-height: container height
- para-speed: The speed and direction at which the parallax animated. Negative values will animate the `block` upwards when scrolling downwards on the page. The inverse apply for positive values. All values are allowed except 0. If 0 is picked, the default value will be applied.
- para-image: path to the parallax image.
<div class="para-container" para-height="50vh"> <div class="para-block" para-speed=-1.0 para-image="bg.jpg"></div> </div>
You can also apply the parallax scrolling effect to target containers and blocks like this:
vp.init({ container : { class : 'para-container', height : '333px', heightSuffix : 'px' }, block : { class : 'para-block', speed : -1, mediatype: image, // image, video or none mediapath: "bg.jpg", // path to file mute: false } });
Changelog:
v1.2.3 (10/13/2021)
- replaced spreader with for-loop for browser support
v1.1.3 (08/29/2018)
- replaced spreader with for-loop for browser support