Mouse Parallax
Did you like what you saw above?
If you liked this parallax effect using the mouse, it's pretty simple to use!
-
First, include the jQuery plug-in we provide.
<script src="path/jquery.min.js"></script> -
Import the plug-in.
<script src="path/WEMouseParallax.js"></script> -
Create the markup structure
<div class="WEBackground"> <img src="img/kirby.jpg" class="WEMouseParallax"> </div> -
Import our CSS styles (for reference!)
<link rel="stylesheet" type="text/css" href="path/WEMouseParallax.css"> -
Initialize the plug-in
<script> $(".WEBackground").WEMouseParallax({ objectPercentage: 30, backgroundPercentage: 75 }); </script>
Options
- objectPercentage: optional, Integer. The value should go around 0 and 100. The higher the value, the less it will move. This percentage is the result of calculating the position of the image minus the end of the edges.
- backgroundPercentage: optional, Integer. As the objectPercentage, the value should go around 0 and 100. The higher the value, the less it will move. This percentage is the result of calculating the position of the image minus the end of the edges.
- WEBackground: html class/id container, name it as you wish. This will be the container of the parallax effect. The name can be whichever you want. Initialize the plug-in with this container.
- WEMouseParallax: html class, required. Include this object into your container, so the plug-in will know which to move.