Parallax Scroll Effect For Fixed Background – simpleParallax

Category: Animation , Javascript | October 22, 2018
Author: piersrueb
Views Total: 1,235
Official Page: Go to website
Last Update: October 22, 2018
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.


You Might Be Interested In:

Leave a Reply