Animate Image Filling Up Using jQuery

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.

How it all stacks up

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.


The HTML

This part is straightforward HTML, just take notice of the hierarchy when putting it all together.

The jQuery

This is by far the easiest cut and paste job ever. Are you ready?

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.

Posted Monday, June 22nd, 2009 · Back to Top

SPONSOR

Add Comment

63 Comments 100 Mentions

  1. jojo Author Editor

    Nice trick.
    Definitely worth a try.
    Thanks for sharing it..

    ·

  2. Samuel Author Editor

    Sweet tutorial, thanks!

    ·

  3. art2code Author Editor

    Nice trick! thx

    ·

  4. Rahul Jadhav Author Editor

    wow thats great. Loved the Demo
    .-= Rahul Jadhav´s last blog ..Adding A jQuery Posts Slider To Blogger Blog =-.

    ·

  5. ptn Author Editor

    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.

    ·

  6. Sam Dunn Author Editor

    @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”

    ·

  7. carlo Author Editor

    I like it! thanks

    ·

  8. Ezrad Lionel Author Editor

    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.

    ·

  9. Sam Dunn Author Editor

    @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.

    ·

  10. sonichtml Author Editor

    Nice post…thank you

    ·

  11. Alex Author Editor

    I like it Sam, keep up the good showcase!

    ·

  12. Ezrad Lionel Author Editor

    Am I still blocked, I hoped you checked out the link. It would really bother me if you didn’t.

    ·

    • Sam Dunn Author Editor

      @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.

      ·

  13. Ezrad Lionel Author Editor

    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.

    ·

  14. Eric Bannatyne Author Editor

    Very nice trick! Thanks!
    .-= Eric Bannatyne´s last blog ..I’m Finally on Twitter =-.

    ·

  15. Jurij Riammer Author Editor

    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 =-.

    ·

  16. aym Author Editor

    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?!

    ·

  17. Graham Author Editor

    This is really fantastic!

    Thank you for sharing it, I think it is going to come in very handy.

    ·

  18. Maicon Author Editor

    Amazing tut! Explore the possibilities of JQuery is wonderful even more with so simple solution.

    ·

  19. Homepage Author Editor

    Super effect!
    I m searching a long time for this!
    thanks a lot for this nice tut!

    ·

  20. Web Design Talk Author Editor

    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 =-.

    ·

  21. flash Author Editor

    @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.

    ·

  22. Alex Author Editor

    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

    ·

  23. e11world Author Editor

    Excellent post! I totally love this effect!

    ·

  24. SJL Web Design Author Editor

    Great jQuery Trick! looking forward to trying it out!!
    Thanks for sharing.

    ·

  25. joey Author Editor

    this Jquery is great!
    but is not best to display effect in IE6

    ·

  26. Lime Web Design Author Editor

    Awesome tutorial. Really like this masking animation effect. Thanks

    ·

  27. Jakob Author Editor

    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?

    ·

  28. Site Developer Author Editor

    Thank you. Good trick. But the main chip in it only for graphics Ellement

    ·

  29. tokat nakliyat Author Editor

    good code thanks

    ·

  30. lucas Author Editor

    great tutorial
    thank you

    ·

  31. darl Author Editor

    Very usefull, thanks !

    ·

  32. The Designary Author Editor

    Thanks for the code. Love me some jquery animations.

    ·

  33. vibe web design Author Editor

    Thanks for it, Your articles are always useful & Helpful to us. I wait your next article.

    ·

  34. QR Code Printing Author Editor

    Hard to believe this is now possible without Flash.

    ·

  35. Xcellence-IT – Web Development Company India Author Editor

    amazing, this is great tutorial, helps us to understand what can be achieve with simple css and great java script framework like jQuery.

    thanks for sharing.

    ·

  36. Dallas Author Editor

    AGH….Amazing!

    Thanks Sam! Now my mind is turning with possibilities. Muahaha.

    Dallas

    ·

  37. L Author Editor

    Does not work in Firefox 4.0.1

    ·

  38. Prayer Requests Author Editor

    How cool! If only I could imagine a way to use this on my site.

    ·

  39. Akif Author Editor

    This is really fantastic and Stunning !

    Thank you so Much for sharing it, and I think it is going to come in very handy.

    ·

  40. Mom Blog Author Editor

    My wheels are spinning now. A whole new word of possibilities just opened up to me.

    ·

  41. Prashant Author Editor

    Its a cool trick. Thanks to the author.
    Will definitely put it into use.

    ·

  42. Mommy Makeover Cost Author Editor

    Thanks for the sweet code. Gonna put this to use this weekend.

    ·

  43. SEO Author Editor

    I’d like to thank you for this informative article.

    ·

  44. meysam Author Editor

    Work is very simple

    ·

  45. rifki Author Editor

    you are cool designer!!!

    ·

  46. code Author Editor

    cant wait to try it now thanks !

    ·

  47. Vicky Author Editor

    The image is very good.

    ·

  48. Greg Author Editor

    This may sound very newb but how in the heck do you get rid of the space above the image? Great effect!

    ·

  49. Greg Author Editor

    I seem to have resolved the issue I had with unwanted white-space above my banner (the dude element.) If anyone is interested…

    Original code is:

     
     

    I eliminated a couple of div tags thusly:

    I also eliminated the   bit to achieve the effect I wanted.

    Thanks for sharing another great example Sam. Next up: get a better handle on Sam’s animated curtains. Cheers.

    ·

    • Greg Author Editor

      And the code is missing: to clarify, the divs that I eliminated are the dudecontainer and the dudeblock. Thanks again.

      ·

  50. www.toothbrushsanitizer.com Author Editor

    Let me know how many entries to mark you for on Friday.

    ·

  51. Andrew Mckiddy Author Editor

    Thank you for the sensible critique. Me and my neighbor were just preparing to do some research on this. We got a grab a book from our local library but I think I learned more clear from this post. I’m very glad to see such great information being shared freely out there.

    ·

  52. Ankit Author Editor

    Great Effect…and usefull too!!! thanks for sharing..

    ·

  53. Thomas Kantis Author Editor

    The new Zune browser is surprisingly good, but not as good as the iPod’s. It works well, but isn’t as fast as Safari, and has a clunkier interface. If you occasionally plan on using the web browser that’s not an issue, but if you’re planning to browse the web alot from your PMP then the iPod’s larger screen and better browser may be important.

    ·

  54. Andy Fred Author Editor

    The allocation with CSS programming for The Photoshop portion is critical input. I would sure print out the page just for me doing same. Thanks for nice and teachable allocation.
    http://www.dreamztech.de/

    ·

  55. سعيد Author Editor

    عالي بود داداش

    ·

  56. Gig Marketplace Author Editor

    Hello,

    is there a demo for this tutorial?

    Thanks :)

    ·

  57. R@YH@N S@RK3R Author Editor

    Excellent work Sam Dunn! This jQuery effect, changed the loading image fantasy. Really great work. :) I am gonna use it to my blog. =>☼⊱~◖ray2ker◗~⊰☼

    ·

  58. Sifat Author Editor

    Awesome POST man I LIKE IT VERY much!!!!!!!!!
    I might use it in my site…………..

    ·

  59. Sarah Author Editor

    Woow, This is awesome .. I’m gonna try it immediately

    ·

  60. محمد صادق Author Editor

    ممنون ;-)
    thankful ;-)

    ·

  61. rohan Author Editor

    Sir,

    my name rohan

    i am learn web designing now. i am not a preferential

    how can make loading image edge transparent edge?

    ·

 

Build Internet by One Mighty Roar. Since 2008.