Advanced Parallax Scrolling Effect – Parallax-Vanilla.js

The Parallax-Vanilla is a seamless library which allows building advance parallax scrolling effect in no time. It is a seamless plugin which developed using pure javascript. It is designed to add extra performance.

In addition, the parallax plugin comes with some awesome features which included super lightweight without dependencies. It is just a few kilobytes which don’t feel the load on your website.

Furthermore, it provides viewport only animations which means the element only animated within the current viewport.

Don’t you think this is an awesome function saves a lot of resources and lets them the page load fast?

Another key feature, this plugin included different media type support. It not only allows to add a parallax effect to the photos but also the video as well.

You can easily add scrolling effect on the header, footer or any other content area on your website.

The advanced scrolling plugin offers you dynamic sizing of the image and the element are dynamically sized to adjust according to relative PV-speed.

The performance is key in this plugin which gives hardware acceleration without any external libraries.

How to Create Advanced Parallax Scrolling Effect

You simply need to download the packages which include min.parallax-vanilla.min.css and vanilla.min.js. All you have to add both the files before the closing head tag in your webpage.

<link href='path/to/parallax-vanilla.min.css'>
<script src='path/to/parallax-vanilla.min.js'></script>

First of all, you need to Wrap a pv-block with a pv-container.

<div class='pv-container'>
  <div class='pv-block'></div>
</div>

Next, you need to attach a media path to pv-block

<div class='pv-container'>
  <div class='pv-block' pv-mediapath=path/to/file.extension></div>
</div>

Finally, you need to initialize the library.

<div class='pv-container'>
  <div class='pv-block' pv-mediapath=path/to/file.extension></div>></div>
</div>
<script>
  pv.init()
</script>

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,
  }
});

Did you find this plugin useful? Let’s share with your friends.