Press "Enter" to skip to content

Smooth and Lightweight Parallax Scroll Library in Pure Javascript

Lightweight and seamless parallax scrolling library implemented in pure javascript using hardware acceleration for additional performance.

parallax scrolling js, full page parallax scroll effect, parallax scrolling css tricks, parallax scrolling css, simple parallax scrolling

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.

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

High Performance Parallax Scroll Effect, parallax-vanilla.js Plugin/Github


See Demo And Download

Official Website(erikengervall): Click Here

This superior jQuery/javascript plugin is developed by erikengervall. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *