parallax-vanilla.js
Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.
Demo
Main features
Super lightweight without dependencies
A few kilobytes of pure JavaScript.
Viewport-only animations
Parallax elements are only animated within the current viewport, saving a lot of resources.
Dynamic sizing
Image-elements are dynamically sized and adjusted relative to the pv-speed.
Performance is key
Vanilla Parallax maximizes your parallax effects with hardware acceleration and zero external libraries.
Media type independence
The parallax effect applies not only on images but on videos as well. Videos' audio will play if the videos are clicked and remain within the viewport.
Browser support
Tested browsers:
| Chrome | Safari | Firefox |
|---|---|---|
| 60+ | 10+ | 44+ |
Installation
bower
bower i --save parallax-vanilla
npm
npm i --save parallax-vanilla
Include
- Include
parallax-vanilla.cssin<head> - Include
parallax-vanilla.jsjust before<body>
<link href="path/to/parallax-vanilla.css" />
<script src="path/to/parallax-vanilla.js"></script>
Usage
Simple usage
1. Wrap a pv-block with a pv-container.
<div class="pv-container">
<div class="pv-block"></div>
</div>
2. Attach a mediapath to pv-block
<div class='pv-container'>
<div class='pv-block' pv-mediapath=path/to/file.extension></div>
</div>
3. Initialize library.
<div class='pv-container'>
<div class='pv-block' pv-mediapath=path/to/file.extension></div>></div>
</div>
<script>
pv.init()
</script>
JavaScript initialization options
Optional global settings can be configured upon initialization.
pv.init({
container: {
class: String,
height: String || Number,
},
block: {
class: String,
speed: Number || Float,
mediapath: String,
mediatype: String,
mute: Boolean,
},
})
JavaScript Settings
| 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 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 mediapaths 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 |
Data attributes: Customize individual elements
Data attributes allow fine control over each individual element and will overwrite the global JavaScript settings.
<div class='pv-container' pv-height=100vh>
<div class='pv-block' pv-speed=3.14 pv-mediatype=video pv-mediapath=path/to/epic_montage.mp4 pv-mute=false></div>
</div>
This code will produce a container with class pv-container with height 100vh containing a block with class pv-block with a parallax speed of 3.14 displaying the media epic_montage.mp4 of type video with pv-mute=false.
| Data attributes for container |
|---|
| pv-height |
| Data attributes for block |
| pv-speed |
| pv-mediatype |
| pv-mediapath |
| pv-mute |
The descriptions and the default values are the same as the corresponding properties of the JavaScript settings object.
CSS
The CSS in parallax-vanilla.css is required in order for parallax-vanilla to function properly.
.pv-container {
...;
}
.pv-container .pv-block {
...;
}
.pv-container .pv-block video {
...;
}
.audio-icon {
...;
}
LICENSE
MIT
579 Dec 26, 2022
73 Dec 15, 2022
26 Dec 28, 2022
223 Dec 31, 2022
3 May 18, 2022
4 May 3, 2022
14 Jan 3, 2023
1 Jan 25, 2022
18 Nov 6, 2022
28 Jul 27, 2023
2 Jan 21, 2022
778 Jan 1, 2023
13 Oct 12, 2022
7 Jun 27, 2022
5.4k Dec 26, 2022
7 Feb 21, 2022
3 Apr 12, 2022
11 Oct 10, 2022
12 Nov 12, 2022