Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance.
Main Features
Extremely lightweight with no dependencies
A few kilobytes of pure JavaScript.
Viewport animation only
Parallax elements are only animated in the current viewport, which saves a lot of resources.
Dynamic Scaling
Image elements are sized and adjusted dynamically with respect to the PV velocity.
Performance is the key
Vanilla Parallax maximizes your parallax effects with hardware acceleration and no external libraries.
Media type independence
The parallax effect applies not only to photos but to videos as well. The audio of the videos will be played if the videos are clicked and remain within the viewport.
Must Read: Simple and Easy To Use Parallax Scrolling Plugin for jQuery | scrolly
How to make use of 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 themes.
<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 a parallax scrolling effect to target containers and blocks.
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
}
});Browser support
Tested browsers:
| Chrome | Safari | Firefox |
|---|---|---|
| 60+ | 10+ | 44+ |
JavaScript Settings
Must Read: Smooth Parallax Scrolling Background Image In Pure CSS Library
| Name | Type | Default | Description | Example values |
|---|---|---|---|---|
| settings | Object | {container, block} | Settings object. These settings will be applied to each container and block. Can be individually overwritten by data attributes. | {container: {…}, block: {…} |
| settings.container | Object | {class, height} | The container object. | {…} |
| settings.container.class | String | pv-container | The class of the container element. Remember to update the CSS classes if you wish to change this. | pv-container |
| settings.container.height | String || Number | 250px | The container’s height is in either pixels or viewport heights. If the string lacks a suffix, or a number is entered, it will default to pixels. | 250px, 50vh, 250 |
| settings.block | Object | {class, speed, mediatype, mediapath} | The block object. | {…} |
| settings.block.class | String | pv-block | The class of the block element. Remember to update the CSS classes if you wish to change this. | pv-block |
| settings.block.speed | Number || Float | -Math.PI | The speed and direction at which the parallax animated. Negative values will animate the `block` upwards when scrolling downwards on the page. | 1, 1.5, -1, -1.5 |
| settings.block.mediatype | String | image | The block’s media type. Blocks with media paths containing a video extension will automatically be considered videos. | image, video, or none |
| settings.block.mediapath | String | undefined | The block’s media path. | ../path/to/file.ext |
| settings.block.mute | Boolean | false | Defines whether or not all videos should be muted. | true or false |
See Demo And Download
Official Website(erikengervall): Click Here
This superior jQuery/javascript plugin is developed by erikengervall. For extra Advanced Usage, please go to the official website.
