Parallax Scroll Effect For Fixed Background – simpleParallax

Preview:

Description:

A dead simple and ultralight JavaScript plugin that applies a subtle parallax scroll effect to the fixed background image.

How to use it:

Create a container element where the parallax background image will appear.

<section id="parallax-container"></section>

Add a fixed background image to the container. Note that the container height must be lower than the image height.

#parallax-container {
  background-image: url('https://picsum.photos/1920/1680/?random');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  height: 400px;
  width: 100%;
}

Put the JavaScript file simpleparallax.js at the end of the document.

<script src="simpleparallax.js"></script>

Initialize the library on the parallax container and specify the parallax distance as per your needs.

simpleParallax('#parallax-container',6);

Changelog:

01/30/2021

• style removed from animation frame call

12/19/2020

• JS updated

10/24/2020

• added support for single call across multiple classes

08/22/2020

• scroll method replaced with requestAnimationFrame