Parallax Scroll Effect For Fixed Background – simpleParallax

Category: Animation , Javascript | January 30, 2021
Author: piersrueb
Views Total: 536 views
Official Page: Go to website
Last Update: January 30, 2021
License: MIT


Parallax Scroll Effect For Fixed Background – simpleParallax


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('');
  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.




  • style removed from animation frame call


  • JS updated


  • added support for single call across multiple classes


  • scroll method replaced with requestAnimationFrame

You Might Be Interested In:

Leave a Reply