Posted by Stephan Kristyn on February 26th, 2010
/ 3 Comments
If you are a Flash native and want to create a mask in jQuery or Javascript you will ask yourself if this is possible at all. I came also to this point and found a solution with a jQuery plugin called background easing.
But first let me explain what alternatives we have. If you want to fade a picture you can use fadein() and fadeout() of the jQuery API. And if you would like to move a picture it is most likely achievable with any JS Framework or even by coding a pure JavaScript solution.
Stand out from the crowd
If you are a Web Designer who wants to stand out from the masses and want to produce a sophisticated animation that looks like its native flash you would need to use a technique I like to call masking.
Masking
Basically you define a rectangular space like a div on your website. In the bounds of this div you would put an object and it would instantly be visible. However if you would move the object out of the defined space of the div the object would disappear. Let’s call the div a mask. You could achieve this behaviour with the overflow:hidden stylesheet property but what if we wanted to move the mask?
Interestingly you really can move the mask itself and this is exactly where it really gets exciting. For instance if you had a shape an image or a navigational element residing on your website within the boundaries of the mask and you move the mask away from the element the effect you see would look like as the element grows by itself. This visual trick is often seen on high-end graphical flash sites like for instance on my retired Meshfields v1 flash site.
Put masking to use in JQuery
To achieve a masked animation in jQuery you have to utilise a technique that I hereby claim to have invented: Movable stylesheet background images that act as masks.
So how is it done?
If you define the background image property of a div with fixed width and height boundaries the image will be consequently cut off at the boundaries of the div.
In detail the whole masked animation is going to be constructed with two layered div elements and the animation itself.
Three components
First of all the div containing the mask that we will move. I gave the div element the following stylesheet properties:
#mask {
background-image:url('mask.jpg');
z-index:2;
}
Next, below this mask we create a div that will contain the image:
<div id="bottomLayer"><img src="myCoolPic.jpg" alt="coolPic" /></div>
Last but not least you are going to need the jQuery plugin that I mentioned at the beginning of the article. Grab it from the jQuery plugin repository.
That’s it basically. Now all that is left for us to do is to animate the mask within the stacked div elements that we set up so far. Take a look at the following jQuery code:
$('#mask').stop().animate({
backgroundPosition: '(230 0)'
}, {
duration: 300,
easing: 'easeInExpo'
})
Let me explain: The backgroundPosition property takes as parameters the x and y position of the object which we assigned the .animate method.
The duration property is a value in miliseconds and the easing property takes values out of Rob Penner’s well-known easing equations. If you haven’t heard of them, this would be a good time you look them up now. Rob currently works at Disney Studios and you can get in touch with him on Twitter.
Conclusion
The only shortcoming in comparison to Flash masks would be that my technique only permits the use of an image that has the exact same colour like the background. Somehow this isn’t a real mask and I would be delighted to hear about a technique where we could have a real mask that is transparent.
If this sounds confusing imagine a background with a distinct pattern and then how it would look like to change the position of an unicolored mask above it. In my opinion the visual effect would not look pleasing.
Wrapping it up
Let’s sum this tutorial up. As you should know by now we basically have three layers.
The top layer. A mask with the flexible background position properties via jQuery
The middle layer. An object that we want to hide or reveal
The bottom layer. An unicolored background in the same color like the mask
To give you a visual demonstration of this concept just head over to www.rumaenisch-dolmetschen.de where I used this technique and animated several images and even the build-up of a contact form.
I would appreciate any feedback, suggestions or questions in the comments below. And if you like to read more tutorials like this one why not subscribe to my RSS feed.
Update Oct10:
According to Todd’s comment below you could achieve the desired results without the background easing plugin but simply with another div.
Stephan Kristyn Mondstr. 1b 81543 München
Stack Overflow