Minimal Background Parallax Scrolling Plugin - bgscroll.js

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.

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 HoffiPL. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 12.12.2017
  • Source