How To Create a Simple Parallax Fixed Background | SimpleParallax

Simple-Parallax-Fixed-Background

Simple fixed background parallax effect in vanilla js. A lifeless easy and ultralight JavaScript plugin that applies a refined parallax scroll impact to the fastened background picture.

How to make use of it:

1. Create a container aspect of the place of the parallax background.

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

2. Add a set background picture to the container.

#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%;
}

3. Put the JavaScript file simpleparallax.js.

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

4. Initialize the library on the parallax container.

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

Parallax Scroll Animation, Parallax Scroll Effect For Fixed Background, Parallax Scrolling Codepen, Pure CSS Parallax Background Image, Fixed-position Parallax Scroll Effect


See Demo And Download

Official Website(piersrueb): Click Here

This superior jQuery/javascript plugin is developed by piersrueb. For extra Advanced usage, please go to the official website.

Share