Minimal Background Parallax Scrolling Plugin - bgscroll.js

The jQuery bgscroll.js plugin adds a subtle parallax scrolling effect to background images as you scroll down or scroll up the web page. Extremely lightweight and dead simple to use.

How to use it:

1. Insert the main JavaScript bgscroll.js after latest jQuery library (slim build is recommended).

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="source/bgscroll.js"></script>

2. Add background images to your parallax containers as these:

<div class="background1">
  ...
</div>

...

<div class="background2">
  ...
</div>

....

.background1{
  width: 100vw;
  height: 70vh;
  background-image: url('parallax-1.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0%;
}

.background2{
  width: 100vw;
  height: 70vh;
  background-image: url('parallax-2.jpg');
  background-repeat: no-repeat;
  background-position: 50% 0%;
}

3. Enable the parallax scrolling effect by calling the main function on the parallax containers:

$(window).scroll(function(){
  $('.background1').bgscroll({
    direction: 'bottom' // scroll direction
  });

  $('.background2').bgscroll({
    direction: 'top'
  });
})

4. More configuration options to customize the parallax scrolling effect.

$('.parallax-container').bgscroll({

  // x position of the background image
  // 0 - 100
  bgpositionx: 50,

  // debug mode
  debug: false,

  // min/max position (in %) the background-image can move to
  min:0,
  max:100
  
});

---

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