Curtains Opening Animation with jQuery

In this tutorial we will make a nice curtains opening animation using jQuery with some additional effects. This animation is extremely easy to be made and i really like it, i hope you will too.

If you checked out the demo let’s start…

HTML

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

This is what we got…

Let’s style it…

CSS

/*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;
}

Now it looks as we want it to look…

jQuery

Time for jQuery… You will notice that we use children() jQuery function, the purpose of that is to make multiple “curtains” with ease because when you click on a “.curtain_wrapper” it will animate only the content inside of that specific div.

$(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);

	});

});

And here is what we end up with (there is a nice animation effect between the previous and this image, check out the demo :) )

That’s it

And we made our curtain opening animation with jQuery. I hope you liked the tutorial, and share with us what you think using the comment form. Also, if you do like it, please vote up on reddit and dzone, digg it or tweet it (it’s just a click away, and it would be of great help to us… The links are bellow)

Don’t Forget

If you want you can subscribe to TutsValley RSS Feed or follow us on Twitter to be informed when a new tutorial comes out. Thank you.