Create the moving background image
The backgroundMove.js is a tiny plug-in for creating the moving background as the 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)
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,
<div class="moving-bg-demo"></div>
CSS for this container
.moving-bg-demo {
background-image: url(images/slider-image-2.jpg);
height: 1280px;
max-width: 1920px;
}
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:
Online demo and code
The CSS and markup:
<style>
.moving-bg-demo {
background-image: url(images/slider-image-2.jpg);
height: 1280px;
width: 1000px;
}
.h1{
text-align: center;
line-height: 550px;
color:#fff;
font-family:Verdana;
}
</style>
</head>
<body>
<div class="moving-bg-demo">
<h1 class="h1">Moving background demo</h1>
</div>
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 higher 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”
The script for this demo:
$(function() {
$('.moving-bg-demo').backgroundMove({
movementStrength:'120'
});
});
The same markup and CSS are used as in the 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).
The markup for this demo:
<p>A demo of moving background in table</p> <table class="demotbl"> <tr> <th>Product</th> <th>Name</th> <th>Quality</th> <th>Quantity</th> </tr> <tr> <td>1</td> <td>Wheat</td> <td>Excellent Quality</td> <td>1500 Bags</td> </tr> <tr> <td>2</td> <td>Rice</td> <td>Good Quality</td> <td>1250 Bags</td> <tr> <td>3</td> <td>Sugar</td> <td>Fine Quality</td> <td>1200 Bags</td> </tr> </table>
The CSS for table data:
.demotbl td{
border: 1px dotted black;
color: #fff;
padding:15px;
width:100px;
background-image: url(images/slide-2.jpg);
background-repeat: no-repeat;
}
The script:
$('.demotbl td').backgroundMove({
movementStrength:'50'
});