Parallax Scroll Effect For Fixed Background – simpleParallax

Category: Animation , Javascript | October 24, 2020
Author: piersrueb
Views Total: 232 views
Official Page: Go to website
Last Update: October 24, 2020
License: MIT

Preview:

Parallax Scroll Effect For Fixed Background – simpleParallax

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:

10/24/2020

  • added support for single call across multiple classes

08/22/2020

  • scroll method replaced with requestAnimationFrame

You Might Be Interested In:


Leave a Reply