Easy Parallax Scrolling Effect In Vanilla JavaScript – parallax-vanilla

Category: Animation , Javascript | July 13, 2019
Views Total:2,249 views
Official Page:Go to website
Last Update:July 13, 2019


Easy Parallax Scrolling Effect In Vanilla JavaScript – parallax-vanilla


A dependency-free JavaScript library to implement the Parallax Scrolling effect on your background images using requestAnimationFrame() API.

How to use it:

Add the parallax block with a background image to a container:

<div class="para-container">
  <div class="para-block" style="background-image: url('bg.jpg')"> </div>

The parallax container must have a fixed height.

.para-container {
  overflow: hidden;
  height: 220px;

The required CSS styles for the parallax block.

.para-container .para-block {
  width: 100%;
  height: 140%;
  will-change: transform;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: cover;

Initialize the parallax library and done.


All default settings to customize the parallax effect.

  container : {
    class         : 'para-container',
    height        : undefined
  block : {
    class         : 'para-block',
    speed         : -Math.PI,
    image         : undefined


v1.2.0 (07/13/2019)

  • Migrate to typescript

v1.1.3 (06/19/2018)

  • Replaced spreader with for-loop for browser support

You Might Be Interested In:

Leave a Reply