Files

Share

Topics

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.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

*{

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:0pxauto;

}

/*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.

1

2

3

4

5

6

7

8

9

10

11

12

&lt;div id="dude"&gt;

&lt;div id="dudecontainer"&gt;

&lt;div class="frame"&gt;

&lt;img src="dudeframe.png"/&gt;

&lt;/div&gt;

&lt;div id="dudeoverlay"&gt;

&lt;div id="dudeblock"&gt;&amp;nbsp;&lt;/div&gt;

&lt;div id="dudeedge"&gt;&amp;nbsp;&lt;/div&gt;

&lt;/div&gt;

&lt;img src="dude.jpg"/&gt;

&lt;/div&gt;

&lt;/div&gt;

The jQuery

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.

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.

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

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

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

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.

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

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

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.

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?

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.

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.

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/