Mouse-aware Parallax Effect with jQuery and TweenMax - Mouse Parallax

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.