jQuery Mouseover Effect Using Parallax Style Tutorial

by , Tutorials, jQuery

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:

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

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

				jQuery('#parallax .parallax-layer').css('display','block');		


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 class="parallax-layer parallax2">
   <img src="images/balloons-2.png" alt="">

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

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

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


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

.parallax-viewport {
	margin:0px auto;
.parallax-layer {
.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.


29+ Free Responsive Navigation Menu Plugins & Tutorials

23+ PHP jQuery CSS Poll Vote & Survey Code Script

90+ Free Responsive jQuery Image Slider & Slideshow Download

38 Free HTML5 jQuery Upload File Scripts Example

86+ Useful jQuery CSS3 Loading & Progress Bar Tutorials

Written by

Graham Bill is a professional web designer and developer for both WordPress, Joomla and platform for eCommerce websites.

Feedback 2 Leave a comment

Leave a Reply

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