Build Internet has a brand new theme, and thats only the beginning. Read the full story or hide this bar

Secondly, in addition to the standard jQuery file, we are also using the easing plugin. We have worked with this plugin in previous tutorials but in this case we will use it to provide a bounce effect when the rope is pulled.

IE6 Disclaimer – A few of the project images use the PNG format in order to have cleaner transparency. To keep things short, I will not be demonstrating the workaround for transparency errors in IE6. If this affects you, I recommend reading this article for a solution.

We made two div classes for the two curtains (.leftcurtain and .rightcurtain) which are locked to their designated sides. This was done in the CSS by using the top,left, and position attributes.

The actual curtain images are set to be 100% width/height of the curtain divs so that when the these divs shrink in width the images become bunched up, just as they would in real life.

The .logo contains what I wish to hide behind the curtain, you can replace it with whatever you wish.

If the curtain is currently closed, the .rope is pulled down, repositioned to top:0px from top:-40px, with a bounce effect brought about by the easing plugin we grabbed before. While this magic is happening each curtain is simultaneously adjusted to a width of 60px, which creates the opening effect. You can set the amount of time they take to open by changing the duration, which is currently set to 2000 (or 2 seconds).

Now that the curtains are open, when the rope is pulled again, the conditional statement will run the closing animation which sets everything back to default values.

As always, your comments, thoughts, dreams, and aspirations are appreciated in the comments below.

Wordpress.com stats not installed! Posted Wednesday, July 8th, 2009 / Back to Top

Thanks for this great tutorial. I tried the live demo and if you just pull with the mouse, nothing happens. You need to click and not just pull. Did I miss something ? .-= Chob´s last blog ..Mon entreprise dialogue avec les blogueurs « influents» … partie 2 =-.

Great effect :) .-= Jørgen´s last blog ..30 Best Photoshop Tutorials of June 2009 =-.

Very nice! Especially the easing in and easing out. Nice images, love this!

This is pretty sweet! I love jQuery. Thank you for this neat effect!

this is amazing! BRAVO! .-= Nikola´s last blog ..Summer Sun =-.

@James Thank you, my background began in PHP so that shows up sometimes in my jQuery. Your method would work too.

Wow, really awesome.. Maybe I can use it on a project soon.. :D

Clever! Perfect example of how jQuery can make what was once a very complicated JavaScript animation and turn it into an easy task. .-= Paul´s last blog ..Using Form Labels as Input Values with jQuery and CSS =-.

I love this! It works fine in the latest versions of Firefox, Opera, Chrome, and IE. Great work!

awesome! .-= Davide´s last blog ..jQuery: il metodo .bind() =-.

The problem for Firefox users is most likely with NoScript. It seems that NoScript is blocking Build Internet from getting the JQuery JavaScript file from Google code (The error refers to a problem with the file name not matching). Here is the complete error from the Error Console:

@Jimmy $curtainopen is just a way to check if the curtain is already open, if you want it to start open you have to change the CSS the elements begin with.

Hi Sam firstly tnx for the this great sharing , i have some problems ,it does not work on ie 8 ? when i open script with ie8 it ask me to show plugin but in firefox in works directly ? what is your advice and if i wanna use script for the all page what should i do to get good quality in curtain image? .. tnxx

These curtains are great, I am however having a small issue, I am trying to put a video behind the curtain as opposed to the image idea. The video is there and working BUT when I go to shut the curtains the video sits on top of the curtain instead of under it. Do you know what I need to do to fix this?

It has some rendering problems. It lags in google chrome and in internet explorer it is clear that the image is constantly renderen untill it arrives at the specified point (e.g. 30px).

Hey, nice tute, would i be able to follow this tutorial and use it in one of my clients websites?

Is there any way to keep the curtains opened all the time (after they clicked on rope to open the curtains), even if user refreshes the page?

I want to use the background of your slide (the closed curtain) in the remainder of my screens. Can I get a copy of that? Also, do you have the rope without the sign on it?

Very nice and cool. Thanks for sharing. Keep up the good work.