enavu webdevmania tutsvalley psdestination
visit the enavu network
25 Comments Article Title Overlay Article Title

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.

DZoneDiggDesign FloatDeliciousBlinklistRedditFacebookGoogle BuzzTwitterStumbleUponTumblrShare

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…

nocss

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…

withcss

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 :) )

final

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.

Related posts:

  1. Making image captions using jQuery
  2. Image splitting effect with CSS and JQuery
  3. Sliding door effect with JQuery
  4. Making Image Overlay Caption Using CSS
  5. How to make a completely reusable jquery modal window

Slobodan Kustrimovic

This author has yet to fill his BIO.

Did you absolutely LOVE this article... share it!

Comments

  • That looks pretty cool – well done!

  • Thanks Marco :) I’m glad you like it.

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

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

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

  • hum… I think I saw that already before!

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

  • Thanks but how about auto closing the curtain?

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

  • Kool man! nice idea

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

  • i nwan to use a curtain or opening doors on two pages of my church website, when page is open doors will open or curtains will open up to reveal our information i need help badly dont know where to start help please…

  • This code works fantastically, but I need the code to only open with the include page, welcome.php is opened (the homepage). I was told to use an if statement, but I”m not sure how to incorporate that into my code. Any ideas?

    Here’s the existing code for calling pages:

  • This design is not all browser compatible.

  • this application is not working in Safari browser. Please update.

  • superb work. keep it up.

  • waw, very nice

  • That’s cool! Is there a way to do away from the ‘Click anywhere to reveal’ bit and just have the curtains open and close with a click of the mouse?

    I am planning on implementing this on my own site and I didn’t want to use Flash.

    I look forward to your response. Thanks!

  • Loved it! It was just what I was looking for!

Leave your own!

Sponsors

freedcamp free project management

Popular Articles

fzilla file hosting