# parallax-vanilla.js Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance. ## [Demo](https://erikengervall.github.io/parallax-vanilla/) ## 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](https://github.com/erikengervall/parallax-vanilla) ```sh bower i --save parallax-vanilla ``` ### [npm](https://www.npmjs.com/package/parallax-vanilla) ```sh npm i --save parallax-vanilla ``` ### Include - Include `parallax-vanilla.css` in `` - Include `parallax-vanilla.js` just before `` ```html ``` ## Usage ### Simple usage **1**. Wrap a `pv-block` with a `pv-container`. ```html
``` **2**. Attach a mediapath to `pv-block` ```html
``` **3**. Initialize library. ```html
>
``` ### JavaScript initialization options Optional global settings can be configured upon initialization. ```javascript 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. ```html
``` 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. ```css .pv-container { ...; } .pv-container .pv-block { ...; } .pv-container .pv-block video { ...; } .audio-icon { ...; } ``` # LICENSE MIT