Hit enter after type your search item

3 Demos of jQuery background image moving plug-in: backgroundMove.js

Create the moving background image

The backgroundMove.js is a tiny plug-in for creating the moving background as mouse moves in the specified element.

For example, your div has a background image. By using this plug-in, the background image moves with the movement of the mouse. You may adjust the movement strength by using an available option (shown in the demo below)

Demo1 Demo2
Developer’s page Download plug-in

Setting up the backgroundMove.js plug-in

Download the plug-in and include the JS file below the jQuery reference:

<script src=”js/backgroundMove/jquery.backgroundMove.js”></script>

(Adjust the path as per your directory structure)

Use the markup with the background image that you want to move. For example,


CSS for this container

 

Initiate the plug-in:

$(‘.moving-bg-demo’).backgroundMove();

A demo of moving background

A simple div element is created with a background image for demonstrating the moving background plug-in. Open the demo by clicking the link or image below and move the mouse and see how background moves:

jQuery background moving

See online demo and code

The CSS and markup:


 

See the complete code on the demo page.

A demo with greater movement strength

The plug-in has an option movementStrength where you may set the int value. The more the value the greater will be movement strength. See this demo in which I used greater value and you may see the difference as compared to the above example”

See online demo and code

The script for this demo:


 

The same markup and CSS is used as in above example.

A demo of applying background moving image in a table

In this simple demo, I have applied the moving background image to an HTML table’s <td> element. Move the mouse cursor to any cell to see how background image moves. The demo is just to show how you may use this in different HTML elements. (Again, this is really a basic use).

jQuery background moving table

See online demo and code

The markup for this demo:


 

The CSS for table data:


 

The script:


 

See the output and complete code in the demo page.

 

This div height required for enabling the sticky sidebar