Mouse Parallax – Interactive Mouse Effect with jQuery

Published by Manoj Kumar at October 6, 2015

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.