Mouse Parallax – Interactive Mouse Effect with jQuery

How to Create a Coins Icon in Adobe Illustrator
April 8, 2014
How To Create Apple ID Without Using Credit Card
December 3, 2015
Show all

Mouse Parallax is an extremely lightweight jQuery plugin to add parallax effects to given elements that respond to mouse movement.

Mouse Parallax

How to use it:

1. Include jQuery javascript library and the jQuery mouse parallax plugin at the end of the document to make the page load faster.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="mouse.parallax.js"></script>

2. Create a list of elements that you want to move within your parallax scene.

<div id="background" class="mouse-bg"></div>
<div id="foreground" class="mouse-bg"></div>
<div id="fore-foreground"  class="mouse-bg"></div>
<div id="fore-fore-foreground"  class="mouse-bg"></div>

3. Add background images to the elements in the CSS.

#background {
background-image: url('1.png');
}
#foreground {
background-image: url('2.png');
}
#fore-foreground {
background-image: url('3.png');
}
#fore-fore-foreground {
background-image: url('4.png');
}

4. The required CSS to make sure your background area is not hidden on page load

.mouse-bg {
left: 0;
right: 0;
bottom: 0;
top: 0;
position: fixed;
z-index: -1;
}

5. Initialize the plugin and set the moveFactor option as you prefer.

<script>
$(document).ready(function() {
$('#background').mouseParallax({ moveFactor: 5 });
$('#foreground').mouseParallax({ moveFactor: 10 });
$('#fore-foreground').mouseParallax({ moveFactor: 15 });
$('#fore-fore-foreground').mouseParallax({ moveFactor: 20 });

$('body').height(3000);
});
</script>

For more Advanced Usages, please check the demo page or visit the official website.