Animate Image Filling Up Using jQuery
The Photoshop Portion – Preparing Your Image(s)
Step one requires that you use your decision making skills to figure out what image you want to use. For this example, I have selected a character which I found in this wonderful Vectortuts+ tutorial.
Next we’re going to want to drop it in to Photoshop for some basic preparation. We’re are going to end up with three images, in order to understand what role each will play, please check out the helpful diagram below.
If any of the following confuses you in any way, take a look at the images I have included in the downloadable files, it should be easier to understand once you see the final products.
What we’re looking to get first is a base image (in this case the actual character), which is a simple matter of saving a cropped image to the size you want. If you would like to include a border around your image, as I have in the demo, make sure the background color matches the one you plan to make the border.
We will skip the middle layer for a moment and look at the top image, which will act as a frame. This image is the inverse of the base image, made so only a cutout of the character can peek through.
In Photoshop you will want to CMD (CTRL on Windows) + Click the base image to select it and then hit CMD (CTRL on Windows) + Shift + I to select the inverse. The selected area will be the frame image, which you can color however you would like.
If you want to include a 10px border around your image, similar to the one in the demo add the following step: While your base image is selected hit Select > Modify > Expand and put in your desired border size, then go ahead and select the inverse. You might need to increase your canvas size in order to prevent unwanted cropping.
Finally we need to make the middle layer image, which I have drawn a box around in the layer diagram. This is the image that will slide up/down above the image and create a unique fill effect (aka paint dripping). I will let you be creative here, but I have included two in the attached files for inspiration.
The CSS
You will notice that I’ve tagged on helpful comments with each relevant element, read them to understand what you are writing.
*{
margin:0;
padding:0;
}
body {
text-align: center;
background: #A4CAEF;
text-align: center;
padding: 20px;
}
/*Container for the image frame aka the top image*/
.frame{
position: absolute;
z-index: 2;
}
/*The container the character goes in for easy placement*/
#dude{
height: 575px;
width: 300px;
margin: 0px auto;
}
/*Adds padding around image to make border. Needed only for pngs.*/
img.loadpic{
margin: 10px;
}
/*Prevents spillover from middle layer moving up*/
#dudecontainer{
position: relative;
overflow: hidden;
height: 575px;
width: 300px;
background: #FFF;
}
/*The middle layer container, hiding base image initially*/
#dudeoverlay{
position: absolute;
z-index: 1;
}
/*White div in #dudeoverlay that fill space the edge image doesn't*/
#dudeblock{
height: 625px;
width: 300px;
background: #FFF;
}
/*Image that adds effect the fill, in this case slanted*/
#dudeedge{
height: 90px;
width: 300px;
background: url('slash.png');
}
The HTML
This part is straightforward HTML, just take notice of the hierarchy when putting it all together.
<div id="dude">
<div id="dudecontainer">
<div class="frame">
<img src="dudeframe.png"/>
</div>
<div id="dudeoverlay">
<div id="dudeblock"> </div>
<div id="dudeedge"> </div>
</div>
<img src="dude.jpg"/>
</div>
</div>
The jQuery
This is by far the easiest cut and paste job ever. Are you ready?
$(document).ready(function() {
$("#dudeoverlay").stop().animate({top:'-665px'},{queue:false,duration:3500} );
});
Boom, it’s that easy. Depending on the size of your image you will want to play around with the top attribute, you will want it to be large enough to completely slide the overlay layer off of the base image. Negative numbers make it go up, positive make it go down. Feel free to fool around with the duration too.
Tutorial Debriefing and Possible Uses
The Live Demo shows two possible animation sequences, although the one I showed you how to do is in the downloadable files as simple.html if you want to check your work. If you use the attached files and this tutorial, you should be able to pioneer some pretty fresh variations, I could see some cool applications in a banner format.
I also recognize that some of you will want to know how to make this a jQuery loading bar, I have not explored that option, but it should be quite doable. If anyone makes that happen, I’d love to see it.
