jQuery Mouseover Effect Using Parallax Style Tutorial

The power of jQuery is enormous, so in this tutorial it 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 it have defined in different style in example.

You may also like my this post:

Also read: 54 Beautiful HTML CSS Button Style, 16 Best Useful jQuery Plugin To Enhance Your Design, 116 Useful CSS3 Tutorials Examples and Tricks for Designer

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 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! It have a jQuery mouseover effect using parallax style. Check out the demo below, and feel free to download this example1 for future use.