Press "Enter" to skip to content

How To Create a Simple Parallax Fixed Background | SimpleParallax

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 the parallax background picture will seem.

2. Add a set background picture to the container. Note that the container height should be decrease than the picture 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%;
}

3. Put the JavaScript file simpleparallax.js on the finish of the doc.

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

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

Changelog:

08/22/2020

  • scroll technique changed with requestAnimationFrame

See Demo And Download

Official Website(piersrueb): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.