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

Html

<div class="logo">
   <img class="frame" src="frame.png" alt="">
   <img class="ani-bg" src="ani-bg.png" alt="">
</div>

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.

The article source:http://www.opensourcehunter.com/2010/02/18/cool-animation-2-images-and-a-little-bit-of-jquery/