Interactive Moving Background Plugin With jQuery - backgroundMove.js

File Size: 3.4 KB
Views Total: 17258
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Interactive Moving Background Plugin With jQuery - backgroundMove.js

backgroundMove.js is a lightweight jQuery plugin for creating an interactive moving background that reacts to your cursor.

See also:

How to use it:

1. Add a background image to your container element.

<div class="box">backgroundMove.js</div>
.box {
  height: 400px;
  max-width: 600px;
  text-align: center;
  line-height: 400px;
  background-image: url(bg.jpg);
  background-repeat: no-repeat;
}

2. Include jQuery library and the jQuery backgroundMove.js script right before the closing body tag.

<script src="//code.jquery.com/jquery.min.js"></script> 
<script src="jquery.backgroundMove.js"></script> 

3. Active the interactive moving background.

$('.box').backgroundMove();

4. Set the movement strength:

$('.box').backgroundMove({
  movementStrength:'50'
});

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