<!--START THE WRAPPER-->
<div class='curtain_wrapper'>

	<!-- 2 CURTAIN IMAGES START HERE  -->
	<img class='curtain curtainLeft' src='images/curtainLeft.jpg' />
    <img class='curtain curtainRight' src='images/curtainRight.jpg' />
    <!-- END IMAGES -->

    <!-- START THE CONTENT DIV -->
	<div class='content'>
		<!-- YOUR CONTENT HERE -->
		<h3>Curtain effect	</h3>
        <p>
        	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </p>
        <!-- END YOUR CONTENT -->
    </div>
    <!-- END THE CONTENT DIV -->

    <!-- START DESCRIPTION DIV, WHICH WILL BE SHOWN ON TOP OF THE CURTAIN AND REMOVED WHEN THE CURTAINS OPEN -->
    <div class='description'>
    	Click anywhere to reveal
    </div>
    <!-- END DESCRIPTION DIV -->

</div>
<!--END THE WRAPPER-->

/*BOTH CURTAIN IMAGES CLASS*/
img.curtain{
	height:300px; /* so jQuery doesn't keep ascpect ration when animating the width '*/
	z-index:99; /* to show it on top of the content*/
}

/*LEFT CURTAIN IMAGE CLASS*/
img.curtainLeft{
	position:absolute; /*absolute positioning is important*/
	left:0px; /*position it on left side of the container*/
}

/*RIGHT CURTAIN IMAGE CLASS*/
img.curtainRight{
	position:absolute; /*absolute positioning is important*/
	right:0px; /*position it on the right side of the container*/
}

/*THE CLASS OF THE WRAPPING DIV (THAT WRAPS EVERYTHING)*/
.curtain_wrapper{
	width:400px; /* same as width of both the images summed */
	height:300px; /* same as height of the images*/
	position:relative; /*relative position so we can absolutely position the child elements*/
	overflow:hidden; /*hide everything out of boundaries (in this case for the description div)*/
	color:white; /* just styling*/
	background:black; /* just styling*/

}

/*THE TEXT DIV CLASS (BEHIND THE CURTAINS)*/
.content{
	position:relative; /*so we can center it*/
	width: 300px; /*curtain_wrapper width - shrinked image width (50px is image when shrinked)*/
	margin:0px auto; /*center it*/
	display:none; /*we don't want our users to see the content while the curtain images are loading*/
}

/*DESCRIPTION DIV CLASS (THE TEXT ON TOP LEFT SIDE IN THE DEMO)*/
.description{
	position:absolute; /*absolute position is important*/
	top:0px; /*position it on top of the curtain_wrapper*/
	z-index:100; /*show it on top of the curtain (remember that they have z-index of 99)*/
	/*styling bellow*/
	padding:5px;
	text-align:center;
	font-size:15px;
	background:#eee;
	border:1px solid #ccc;
	border-left:0px;
	border-top:0px;
	color:black;
}

$(document).ready(function(){

	// when user clicks inside the container...
	$('.curtain_wrapper').click(function(){

		//..animate the description div by changing it's left position to it's width (but as negative number)...
		$(this).children('.description').animate({'left': -1*$(this).width()});

		//...animate the 2 curtain images to width of 50px with duration of 2 seconds...
		$(this).children('img.curtain').animate({ width: 50 },{duration: 2000});

		//...show the content behind the curtains with fadeIn function (2 seconds)
		$(this).children('.content').fadeIn(2000);

	});

});

Comments

• Marco Nov 2nd, 09

  That looks pretty cool – well done!
• Boba Nov 2nd, 09

  Thanks Marco I’m glad you like it.
• Ange Nov 4th, 09

  Looks great I am after something like this, where do I get the left and right curtain images from?
• Boba Nov 4th, 09

  @Ange – You can get the source, the link to it is right after the title and description of this article (same place as the demo link). All the files are there including the images.
• Borko Nov 20th, 09

  Thanks, this is great! I was looking for an animation like this, but I didn’t want to use flash.
• Eli Jan 4th, 10

  hum… I think I saw that already before!
• Boba Jan 4th, 10

  Maybe on BuildInternet.com, they also have a curtain opening effect tutorial but it’s not same.
• smartguy Apr 30th, 10

  Thanks but how about auto closing the curtain?
• Mikado May 5th, 10

  Thanks for this great animation.
  Please could you tell me what should I modify on the jqery code for the animation to start automatically when the page loads, instead of having to click on the curtain_wrapper div?

  What I want exactly is the same action that it has when you click on that div, but that it will be performed automatically when the page loads.

  Hope you can help me!
  Thanks so much!
• Abhishek Dilliwal Jul 13th, 10

  Kool man! nice idea
• mithul Jul 18th, 10

  Hi All,

  jquery curtain animation very nice. i implemented this effect one of my project. but problem is the client dont need the “Click anywhere to reveal” link
  client need this autoplay.
  can any one help me! i need this very urgent!

Leave your own!

Your Name

Email

Website

Comment