Mouse-aware Parallax Effect with jQuery and TweenMax - Mouse Parallax
File Size: | 4.11 KB |
---|---|
Views Total: | 21960 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Mouse Parallax is a minimalist jQuery script that allows you create an interactive multi-layered parallax effect responding to mouse move. Powered by GreenSock's TweenMax.
How to use it:
1. Add multiple layers of images to your webpage.
<img src="bg.jpg" alt="Background" class="background"> <img src="cloud.png" alt="Clouds" class="cloud">
2. Make them position: absolute
and set the initial position.
.background { position: absolute; z-index: 1; ... } .cloud { position: absolute; z-index: 2; ... }
3. Add jQuery library together with TweenMax.js and the jQuery Mouse Parallax script at the end of the webpage.
<script src="jquery.min.js"></script> <script src="TweenMax.min.js"></script> <script src="jquery-parallax.js"></script>
4. Animate the images with mouse interaction.
// $fn.parallax( resistance, mouse ) $( document ).mousemove( function( e ) { $( '.background' ).parallax( -30, e ); $( '.cloud' ) .parallax( 10 , e ); });
This awesome jQuery plugin is developed by giuseppesalvo. For more Advanced Usages, please check the demo page or visit the official website.