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:

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:

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.

DemoDownload (4698)

Written by Graham

Graham Bill has been a professional web developer and designer with more experience on coding HTML5, CSS3, php, javascript, jquery, ajax, jsp, XML, MySQL, SEO and especially on development joomla templates and wordpress themes.

Feedback 2 Leave a comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Please check to comfirm

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>