Basic Background Parallax Effect With jQuery And CSS

background-parallax-scroll is an ultra light jQuery plugin which utilizes CSS background-position-y property to apply a basic parallax scrolling effect on your background image.

Installation:

# Yarn
$ yarn add jquery.background-parallax-scroll

# NPM
$ npm install jquery.background-parallax-scroll --save

How to use it:

1. Create a container on which you want to apply the parallax scroll effect.

<div class="banner">
  ... Content Here ...
</div>

2. Add a background image to the container.

.banner {
  background-image: url(https://unsplash.it/1920/1080/?random);
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  height:300px;
}

3. Set the background-attachment to fixed.

@media (min-width: 1024px) {
  .banner {
    background-attachment: fixed;
  }
}

4. Put jQuery JavaScript library and the background-parallax-scroll.js script right before the closing body tag.

<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="src/jquery.background-parallax-scroll.js"></script>

5. Enable the parallax scroll effect on the background image.

jQuery(function($) {
  $('.hero').backgroundParallaxScroll();
});

6. Specify the animation speed.

jQuery(function($) {
  $('.hero').backgroundParallaxScroll({
    speed: 3 // Optional
  });
});

Changelog:

2018-07-19

• Bugfix

2018-07-10

• Bugfix

2018-07-08

• Code refacting

2017-11-29

• JS & CSS refactor.

---

This awesome jQuery plugin is developed by inc2734. For more Advanced Usages, please check the demo page or visit the official website.