jQuery Plugin To Pan Html Elements With Mouse Move - innermovement

File Size: 3.45KB
Views Total: 4296
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin To Pan Html Elements With Mouse Move - innermovement

Innermovement is a small jQuery plugin which allows to smoothly pan an Html element (e.g. image) by moving the mouse cursor.

How to use it:

1. Load the latest jQuery javascript library and jQuery innermovement plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.innermovement.js"></script>

2. Insert an image in the page.

<img src="1.jpg" />

3. Initialize the plugin.

<script>
$(function() {
$('img').innerMovement();
});
</script>

4. Extend with given options.

<script>
$(function() {
$('img').innerMovement({
// Vertical padding
"vPadding": 50,
// Horizontal Padding
"hPadding": 50,
// Animation duration
"animationDuration": 500});
});
</script>

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