parallax-vanilla.js

Seamless and lightweight parallax scrolling library implemented in pure JavaScript utilizing Hardware acceleration for extra performance.

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.css in <head>
Include parallax-vanilla.js just 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

erikengervall/parallax-vanilla