Cool animation with jQuery

Open your Dreamweaver or other editor and create a html file.

 

 

Html

As you can see there are 2 images in this div, but one is positioned outside the box.

CSS

body{
background:#29b0b1;
}
.logo{
width:500px;
height:120px;
float:left;
overflow:hidden;
position:relative;
}
.ani-bg{
position:absolute;
top:-500px;
left:0;
}
.frame{
position:absolute;
top:0;
left:0;
z-index:1!important;
}

As you can see has the .frame an z-index attribute, this means, it’s on top of the other image. The logo div has a overflow hidden, this means that the ani-bg.png image will not be displayed outside the logo div. Basic and simple.

Javascript/jQuery

$(document).ready(function(){
$(".ani-bg").animate({
marginTop: "420px"
}, 2500 );
});

Before using this piece of code you have to download and add the jQuery libiray in to your html file. Download it here. I have used 1.3.2 for this tutorial, but you can use all version of jQuery for this effect.

I have used the animation effect for this tutorial, this is a very simple but still very useful effect. This piece of code will animate the hidden ani-bg.png from the top to the bottom(from -500px till 420px), which it will be visible. You can change the speed of the animation, i have set this example on 2500 milliseconds.

Download: http://www.htmldrive.net/items/download/900

Be Sociable, Share!

Leave a comment