jQuery Mouseover Effect Using Parallax Style Tutorial

The power of jQuery is enormous, so in this tutorial we are going to show you in a very creative way using parallax style with jquery  mouse over effect. On mouse over a parallax, animation image layer are response to the mouse travelling the whole width of the mouse port, the position of image move depend on css style that we have defined in different style in example.

You may also like my this post:

• jQuery Mouseover Effect Example
• CSS3 Hover Effects

Demo  Download

jParallax turns nodes into absolutely positioned layers that move in response to the mouse. Depending on their dimensions these layers move at different rates, in a parallaxy kind of way.

Let’s go with my tutorial coding bellow:

This image effect  parallax style using plugin such as:

• jquery.jparallax.js
• jquery-events-frame.js
• jQuery v1.8.2

The Markup Language

The jQuery function for parallax effect will have the following code:

<script>
     $(function() {
	   if(jQuery('#parallax').length != 0){
		if(jQuery(window).width() > 980){

			//apply parallax effect
			jQuery('#parallax .parallax-layer').parallax(
				{mouseport: jQuery('#parallax')}
			);

			$(window).load(function(){
				jQuery('#parallax .parallax-layer').css('display','block');		

			});
		}
	}
 }); 
</script>

The  HTML structure will have the following code:

 
<div id="parallax" class="parallax-viewport">

<div class="parallax-layer parallax1"> 
 <img src="images/balloons-1.png" alt="">
</div>

<div class="parallax-layer parallax2">
   <img src="images/balloons-2.png" alt="">
</div>

<div class="parallax-layer parallax3">
   <img src="images/balloons-3.png" alt="">
</div>

<div class="parallax-layer parallax4">
  <img src="images/balloons-4.png" alt="">
</div>

<div class="parallax-layer parallax5">
  <img src="images/balloons-5.png" alt="">
</div>

</div>

The Cascading Style Sheets (CSS) will have the following code:

.parallax-viewport {
	position:relative;
	overflow:hidden;
	width:980px;
	height:80%;
	margin:0px auto;
	position:absolute;
	text-align:center;
}
.parallax-layer {
	position:absolute;
	text-align:center;
}
.parallax1 {width: 950px; height: 573px; display: block; top: 74.5895%; margin-top: -427.398px; left: 24.6184%; margin-left: -233.874px;}
.parallax2 {width: 900px; height: 573px; display: block; top: 74.5895%; margin-top: -427.398px; left: 24.6184%; margin-left: -221.565px;}
.parallax3 {width: 970px; height: 563px; display: block; top: 74.5895%; margin-top: -419.939px; left: 24.6184%; margin-left: -238.798px;}
.parallax4 {width: 960px; height: 533px; display: block; top: 74.5895%; margin-top: -397.562px; left: 24.6184%; margin-left: -236.336px;}
.parallax5 {width: 940px; height: 293px; display: block; top: 95.5895%; margin-top: -459.939px; left: 14.6184%; margin-left: -231.413px;}

Now! We have a jQuery mouseover effect using parallax style. Check out the demo below, and feel free to download this example1 for future use.

Demo | Download (2274)