Minimal Background Parallax Scrolling Plugin - bgscroll.js
File Size: | 15.2 KB |
---|---|
Views Total: | 2143 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.