Share Coding

Tutorials, Problems, Stuffs …

Mouse Over 3D Effect on jQuery

It is easy to make a custom 3D Effect by just one picture with jQuery.
3D Effect on jQuery
When you use mouse around the Text, it will also follow your move!

Click here for Demo

To make a 3D effect like that, you will need jQuery and jParallax: http://webdev.stephband.info/parallax.html

 
1. Import the jQuery library and jParallax plugin

<script type="text/javascript" src="http://webdev.stephband.info/js/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://webdev.stephband.info/js/jquery.jparallax.js"></script>

 
2. Create a DIV to store the images for the 3D Effect, and state your images like this.

<body>
<div id="parallax">
    <img id="img1" src="https://sharecoding.files.wordpress.com/2012/02/3dbanner1.png" style="width:960px; height:200px;"/>
    <img id="img2" src="https://sharecoding.files.wordpress.com/2012/02/3dbanner1.png" style="width:980px; height:204px;"/>
    <img id="img3" src="https://sharecoding.files.wordpress.com/2012/02/3dbanner1.png" style="width:1000px; height:208px;"/>
</div>
</body>

Note that the images are enlarged by degrees.

 
3. Set a CSS to the DIV for 3D Effect

<style>
#parallax {
	position:relative;
	overflow:hidden;
	width:960px;
	height:200px;
}
</style>

 
4. After all, we just need to add one row to active the 3D Effect

<script type="text/javascript">
$(document).ready(function() {
    jQuery('#parallax').jparallax();
    $("#img1").css("opacity", "0.4");
    $("#img2").css("opacity", "0.6");
    $("#img3").css("opacity", "0.8");
});
</script>

 
5. Finish. Another thing is that jParallax only seems to support jQuery 1.3.2 or LOWER

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: