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.
Discussion
June 22nd, 2009 at 5:07 PM
Nice trick.
Definitely worth a try.
Thanks for sharing it..
June 22nd, 2009 at 9:42 PM
Sweet tutorial, thanks!
June 23rd, 2009 at 4:43 AM
Nice trick! thx
June 23rd, 2009 at 5:13 AM
wow thats great. Loved the Demo
.-= Rahul Jadhav´s last blog ..Adding A jQuery Posts Slider To Blogger Blog =-.
June 23rd, 2009 at 6:32 AM
Adding the file sizes of jQuery, the used HTML and additional CSS, it will surely exceed the additional file size needed for using the same image with interlace. Completly useless.
And you even have to force the animation time (in this case 3.5 sec). The website visitor sees a loading-animation of 3.5 seconds duration, even if the image is loaded faster than this.
Again, I think, it’s completly useless loading images this way.
June 23rd, 2009 at 7:13 AM
@ptn
I think you’ve missed the point of what the purpose of this tutorial was.
First of all you are talking about a matter of kb required to make this all possible, in the modern day internet, this is not something we always have to cut down to the smallest number possible.
Secondly, this is not supposed to be a new way of loading images, it is just supposed to be a unique way of first presenting them. You’ll notice that this is different in the fact that it adds more control (ie time until displayed and custom edges that create things like the paint splatter effect).
It is for aesthetic appeal, not to replace the basic functionality of loading an image, take a look at the following site banner – http://www.plainwhitets.com/
Even when it loads there continues to be animations – why? – Because it looks cool and is refreshing for the visitor.
Ultimately it comes down to what you think you can do with what I’ve presented, and hopefully with a little more creative thought you can come up with something that’s not “completely useless”
June 23rd, 2009 at 4:51 PM
I like it! thanks
June 23rd, 2009 at 5:50 PM
That’s almost as impressive as when I did it 10 years ago. Go to my page, that’s all Javascript, now rethink what you just did. And wait till JQuery catches up.
June 23rd, 2009 at 6:54 PM
@Ezrad Lionel
I’m assuming you are either one of two things:
1) A diehard Javascript advocate, down with frameworks.
OR
2) Making fun of diehard Javascript advocates.
I can’t entirely decide which, so I will respond as follows:
jQuery is a versatile framework that allows wonderful effects without as much coding. I’m impressed that Javascript is the product of 10 years ago, nicely done.
June 24th, 2009 at 6:19 AM
Nice post…thank you
June 24th, 2009 at 8:20 AM
I like it Sam, keep up the good showcase!
June 24th, 2009 at 8:30 AM
Am I still blocked, I hoped you checked out the link. It would really bother me if you didn’t.
June 24th, 2009 at 8:54 AM
@Ezrad Lionel
You were never blocked, that comment was just put in the “needs approval” box because it had so many links. I then deleted it as you requested.
After looking over those links its pretty clear right now that jQuery and your framework VVED both have similar goals/ functionality up until a certain extent.
I would encourage you to perhaps dive into jQuery and appreciate what it has done as well, it is a widely accepted framework by one of the individuals that is responsible for Firefox. Many people have been contributing plugins and scripts which as a result expands its functionality beyond what one individual alone can accomplish.
June 24th, 2009 at 9:01 PM
I understand what you’re saying, but I have looked at Jquery as well as a lot of other frameworks, and my initial concept of a framework differs from the majority of those widely available. I also have my own cms which is similar to wordpress but is headed in a different direction. Your implementation is quite nice, don’t get me wrong. But knowing what I have done, and can do with my framework, it really wasn’t that impressive. Your site remains an inpiration for me quite often and I will continue to visit. Thank you.
June 28th, 2009 at 11:58 PM
Very nice trick! Thanks!
.-= Eric Bannatyne´s last blog ..I’m Finally on Twitter =-.
July 3rd, 2009 at 7:33 AM
But this won’t work on a background image will it? So you only can use a rectangular picture for this or leave the plain coloured frame. Than it looses the “funnyness” of the visual effect, you tryed to achieve.
Or don’t i get some wayaround?
Anyway it’s a nice idea and a very quick understandable tutorial.
Greetings.
.-= Jurij Riammer´s last blog ..HP Insight Serie – Business und Technologien =-.
August 6th, 2009 at 11:11 AM
jQuery seems to get rid of flash, huh?! xD
Do you always need to use the same color to get that effect. I would like to let some boxes animate into the page with a pattern as a background…
Explanation:
You visit the page and it only displays this background pattern. And a second later, a box will appear with a 45° animation?!
August 25th, 2009 at 4:25 AM
This is really fantastic!
Thank you for sharing it, I think it is going to come in very handy.
August 29th, 2009 at 7:58 AM
Amazing tut! Explore the possibilities of JQuery is wonderful even more with so simple solution.
September 11th, 2009 at 10:58 AM
Super effect!
I m searching a long time for this!
thanks a lot for this nice tut!
November 12th, 2009 at 3:21 PM
Wow! I’m constantly amazed at what people come up with using JQuery. When I first looked at the demo I thought it was a Flash preloader. Excellent job.
Can’t get it working in IE6 though – shame as I wanted to use this on my works website, as we’re having a bit of a redesign – thought this would be perfect for the logo :(
.-= Web Design Talk´s last blog ..Process Custom eCommerce data using Paypal IPN =-.
July 12th, 2010 at 12:44 PM
@aym
you see a test in jQuery which replicates what Flash was doing 10 years ago and now you assume that jQuery will replace Flash?
Comments like yours are the ones that give Flash and jQuery a bad name.
jQuery advocates used to push jQuery because it was the “right” tool for the right project and look at them now, trying to replicate Flash. As soon as they can replicate something they easy forget how not to use the “right” tool for the right project.
July 12th, 2010 at 7:26 PM
I LOVE IT man! One question, I’m assuming the queue property is the delay? I’m not a jquery master so how would I modify that line to delay the animation by a few seconds? Thanks man
July 13th, 2010 at 3:43 AM
Excellent post! I totally love this effect!
July 13th, 2010 at 6:56 AM
Great jQuery Trick! looking forward to trying it out!!
Thanks for sharing.
July 18th, 2010 at 10:19 PM
this Jquery is great!
but is not best to display effect in IE6
July 20th, 2010 at 12:14 PM
Awesome tutorial. Really like this masking animation effect. Thanks
July 26th, 2010 at 8:21 AM
Very cool tutorial! I haven’t had the time to try it out myself but I have a question:
What happens if the animation for some reason doesn’t work (in ie6 for example). Is there a fallback for browsers that do not support this animation? For example to just display the final image as it looks like when the animation is finished?
July 28th, 2010 at 6:25 PM
Thank you. Good trick. But the main chip in it only for graphics Ellement
August 14th, 2010 at 6:34 AM
good code thanks
Join the Conversation!
Remember: Life's not all doom and gloom, so please keep it constructive. If we've made an error or missed something big, please let us know! Learning is revisions, after all.