jQuery Plugin To Create Auto Scrolling Background - backgroundScroll

File Size: 588 KB
Views Total: 5689
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugin To Create Auto Scrolling Background - backgroundScroll

backgroundScroll.js is a lightweight jQuery plugin to automatically and continuously scroll your background image with specified speed and direction.

Basic usage:

1. Include the autoBackgroundScroll.js file after the jQuery JavaScript library as shown in the code snippet below

<script src="jquery.min.js"></script>
<script src="js/backgroundScroll.js"></script>

2. Add a background image to your container.

body {
  background-image: url(bg.jpg);
  background-position: 0px 0px;

3. Call the plugin on the container to start an animated background with a continuous scrolling effect.


4. Config the auto scrolling effect.


  // set to 'true' if you want to scroll the pattern image
  pattern: false,

  // bind to click event or not
  click: false,

  // image path
  img: '',

  // animation speed
  speed: 1,

  // animation duration
  duration: 10,

  // 'right' or 'left'
  directionX: '',

  // 'top' or 'bottom'
  directionY: '',

  // width/height of image
  imageWidth: 0,
  imageHeight: 0,
  position: ''


Change log:



  • refactor


  • bugfix


  • bugfix


  • added more options

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