Create Infinite Scrolling Backgrounds With jQuery - scrolly.js

scrolly.js is a really small (~1kb minified) jQuery plugin to create horizontal scrolling backgrounds on the webpage. The goal of this plugin is to move background images of containers in a loop from right to left.

How to use it:

1. Add jQuery library and the jQuery scrolly plugin's files to the webpage.

<link rel="stylesheet" href="scrolly.css">
<script src="https://code.jquery.com/jquery-3.4.0.slim.min.js" 
        integrity="sha384-7WBfQYubrFpye+dGHEeA3fHaTy/wpTFhxdjxqvK04e4orV3z+X4XC4qOX3qnkVC6" 
        crossorigin="anonymous">
</script>
<script src="jquery-scrolly.js"></script>

2. Initialize the plugin and define the path to the background image.

<div class="example"></div>

$("body").makeScrolly({ 

  // required
  image : "bg.jpg",

  // the space from the top
  // required
  top: 0
  
});

3. Set the height of the background image. Default: 100px.

$("body").makeScrolly({ 

  image : "bg.jpg",
  top: 0,
  height: 150
  
});

4. Set the scrolling speed. Default: 5.

$("body").makeScrolly({ 

  image : "bg.jpg",
  top: 0,
  speed: 10

});

5. Set the z-index of the background image. Default: 100.

$("body").makeScrolly({ 

  image : "bg.jpg",
  top: 0,
  zindex: 999

});

6. Set the ID of the background image. Default: null.

$("body").makeScrolly({ 

  image : "bg.jpg",
  top: 0,
  id: "demo"

});

---

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