Animate Curtains Opening with jQuery

Animate Curtains Opening with jQuery


Step 1 – What You’ll Need

This tutorial would not be anything special without the graphics, so let’s make sure you’ve got those under control. I’ve included the ones used in demo as part of the attached files, now would be a good time to download them if you intend to use them.

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.

Step 2 – Setting Up the HTML

Step 3 – Add the CSS

Let’s pause for a minute and catch up with what we’ve just done.

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.

You’ll notice that we specified the width for each curtain, 50% and 51%. The varying widths is to compensate for some choppy edges when the curtains are closed that could cause the elements underneath to peak through. To combat this we made the right curtain slightly overlap the left one, by using the z-indexes. These z-index values also ensure that the curtains stay on top of everything that is supposed to be behind the curtains.

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.

Finally the .rope simply places the rope graphic on top of everything else and hides part of the image off screen so we can accomplish the “pulling the rope” effect later.

Step 4 – Open the Curtains with jQuery

When the document is all ready to roll, we establish that the curtains are closed, by setting $curtainopen = false. We use the value of this variable to determine whether to run the animations for opening or closing the curtains via an ‘if’ statement.

The other event that we have mapped out is when .rope is clicked, which causes the above mentioned conditional statement to run. Additionally we blur() the links and return false; to make sure the link does not direct the user elsewhere. For those curious, we have written an article about blurring links, so get versed in it.

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.

Step 5 – Cue Excitement, You’re Done

You’ve now got yourself a functioning stage, hopefully you can find something showstopping to put on it. I opted to make the stage stretch the entire screen but you can certainly adjust the width by placing it in a specified width container. This is where the artistic license kicks in. This might also benefit from a preloader to prevent the user from seeing what’s behind the curtain during longer loads.

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

Posted Wednesday, July 8th, 2009 · Back to Top

SPONSOR

Add Comment

184 Comments 137 Mentions

  1. Brian Muse Author Editor

    Pretty neat. You have two step 3s though!

    ·

  2. Sam Dunn Author Editor

    @Brian Muse
    So I did…thank you for your superior counting skills

    ·

  3. 2tone Author Editor

    I really like your tutorials, specially jquery´s, please don´t stop sharing!;)
    .-= 2tone´s last blog ..swedish-organic-water =-.

    ·

  4. Nicholas Z. Cardot Author Editor

    Wow! That looks really cool. I don’t need a curtain for any of my current projects but it looks great.
    .-= Nicholas Z. Cardot´s last blog ..Only 2 Days Remaining: Subscribe Now & Win =-.

    ·

  5. Chob Author Editor

    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 =-.

    ·

  6. Jørgen Author Editor

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

    ·

  7. Mac Agenda Author Editor

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

    ·

  8. Ezrad Lionel Author Editor

    I hope you don’t mind if I port this to VVED? It runs kinda slow even in Chrome or that might be the easing plugin? Great Job.

    ·

  9. Sam Dunn Author Editor

    @Chob
    I suppose I could have labeled the rope a little bit more clearly, it’s a click activated event only, although it could be modified to respond to a pull as well.

    @Ezrad Lionel
    What exactly appears to be running slow? I have checked it out in all browsers and the only thing I’ve seen is minor image distortions in the curtains mid-resize in Firefox. I would be curious to see your VVED port/if it runs any smoother.

    ·

  10. Travis Author Editor

    FYI, the demo doesn’t work in FF 3.5

    ·

    • Sam Dunn Author Editor

      @Travis
      I don’t entirely know how to field this one, because I’m running Firefox 3.5 and it works splendidly.

      ·

  11. e11world Author Editor

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

    ·

  12. Will Anderson Author Editor

    @Travis
    I’m also running Firefox 3.5 and it seems to work fine. Even though the rope says “Pull Me” you just want to click on it, other wise it won’t work. Also make sure JavaScript is enabled :)
    .-= Will Anderson´s last blog ..JSON and ASP.NET =-.

    ·

  13. Sam Dunn Author Editor

    @Will Anderson & Travis
    To avoid further confusion I have changed the text on the rope in the demo, thanks for voicing the concern.

    ·

  14. Janko Author Editor

    Fantastic idea and awesome demo. Really refreshing tutorial.
    .-= Janko´s last blog .."Web Form Validation" article on Smashing Magazine =-.

    ·

  15. Nikola Author Editor

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

    ·

  16. Adam Author Editor

    Very cool effect !

    ·

  17. xavier Author Editor

    Amazing!!!! Thanks for share it!!

    ·

  18. James Author Editor

    Nice effect.

    Couple of notes about your JS:

    You should always use var to declare variables; otherwise you’re just creating globals. Why are you prefixing “$curtainopen” with a dollar symbol? – this is not a convention; unless, perhaps, you thought you were writing PHP…

    Also “if(something == false)” is an almost meaningless expression. It’s essentially the same as “if(something)”.
    .-= James´s last blog ..Special scroll events for jQuery =-.

    ·

    • Sam Dunn Author Editor

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

      ·

  19. Diego Author Editor

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

    Thanks!

    ·

  20. Paul Author Editor

    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 =-.

    ·

  21. mcd Author Editor

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

    ·

  22. Ezrad Lionel Author Editor

    I was referring to the easing on the animation. At the start and/or(dependent on browser) the end of the animation it sort of stutters.(I restarted my pc to confirm this) I see you’re using jquery easing which uses linear equations. Mine (no plug) uses bezier curves which are integrated into the core. The linear equation should always be smoother as the bezier curves are dependent on an additional precision value. I was actually planning on extending my rendering engine to incorporate these kind of user defined linear equations. I think that the stutter/lag is because Jquery uses brute force techniques. i.e. If you call “animation” 10 times and it will try to execute them all at the same time, which is why i think it’s happening when you’re animating two large objects a the same time. Mine (again no plug) runs on a system clock that coordinates animation dependent on the current load on the cpu and a predefined system FPS. You might have noticed, the first demo I tried to port might have been smoother than the Jquery implementation.. (well except for loading the large *** .js dev file ^_^) As I might have said, I’m basically building a game engine that i use on my sites. A falsh killer if you will. HTML 5 will be a big help. I’ve been kinda busy (surprisingly) lately but once I port it I’ll send it to you via email or something.

    ·

  23. Web Design Mumbai Author Editor

    this is very very impressive.

    ·

  24. FAQPAL Author Editor

    Excellent effect, well done and thanks for sharing. I posted it to FAQPAL.
    .-= FAQPAL´s last blog ..16 Good Questions to Ask before hiring PSD to HTML provider | Everything about XHTML & CSS =-.

    ·

  25. Michael Updegraff Author Editor

    Has an issue with FireFox 3.0.12, curtain will not open

    ·

  26. Davide Author Editor

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

    ·

  27. Weboldalkészítés – Pécs Author Editor

    Wow, really awesome.. Excellent effect! Thanks!

    ·

  28. Gabriel Author Editor

    Really awesome. I love it !!!
    A question… I try to put a Youtube video in img class=”logo”, replacing .png, but it see over the curtains…
    Is there a way to “fix” this ??
    Thanks,
    G.
    .-= Gabriel´s last blog ..Heroes Volumen 5, Redemption, video adelanto =-.

    ·

  29. PhpMyCoder Author Editor

    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:

    [NoScript] Blocking cross site Javascript served from http://jqueryjs.googlecode.com/files/jquery-1.3.2.js with wrong type info attachment; filename=”jquery-1.3.2.js” and included by http://buildinternet.com/live/curtains/#

    For some reason Allowing buildinternet.com in NoScript isn’t working, nor is Allowing Scripts globally. This goes so show how picky NoScript is about file names, but I guess all for the better. My guess would be simply disabling from the Addons window NoScript or going into settings and allowing scripts to be included from other domains will fix this. I, though, am going to avoid all that hassle and view it in Chrome. That should work! (Or James could host the JQuery script on BuildInternet and the problem should vanish)

    ·

  30. Piyush Agarwal Author Editor

    amazingly cooolll…..
    This is something that will bring that WOW effect to a project I am working on….
    Thanks a lot!
    .-= Piyush Agarwal´s last blog ..Kolkata Bloggers Meet 2009 – WebReps.in =-.

    ·

  31. saro Author Editor

    I would like to have it onload function.

    as i am newbie..can you please explain it.

    Thanks

    ·

  32. fahma Author Editor

    cool man…thanx

    ·

  33. Jimmy Author Editor

    very cool !
    but by setting “$curtainopen = true;” the site doesn’t start with an open curtain. is there a trick?

    ·

    • Sam Dunn Author Editor

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

      ·

  34. rona Author Editor

    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

    ·

  35. rizza Author Editor

    WOW, this is what I’m looking for, I have a project and I think it would be nice to have animate curtain.
    Thank for sharing Sam

    ·

  36. tuna Author Editor

    I really like it, good tutorial..
    .-= tuna´s last blog ..Photoshop’ta Hoş Bir Girdap Yapımı =-.

    ·

  37. jo Author Editor

    thanks for this tut, i read the other explainations on other pages ages ago, and yours is one of the best… :)

    ·

  38. remco van rooyen Author Editor

    its very nice.. but please turn off the outline. by a.class{outline:none;} then… its perfect :D

    ·

  39. seo Author Editor

    perfect bro :)

    ·

  40. Ange Author Editor

    Hi Sam

    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?

    ·

  41. Foekie Author Editor

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

    I will try to get a work around for this.

    To ange:
    Youtube video’s are always on top of everything. (it’s an object) There is a work around for this called iframe shim, but this is a very bad work around.

    ·

  42. Jay Author Editor

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

    Many thanks

    ·

    • t1285 cartridges Author Editor

      very nice tutorial,very useful for me ,thanks.

      ·

  43. Milind Author Editor

    It’s really amazing.

    ·

  44. Nishanth THomas Author Editor

    Great Dude I included this code in my asp.net project , So that home page is behind the curtain and when we pulls the curtain only we can see the home page .Thanks for sharing the code …….

    ·

  45. Tony Author Editor

    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?

    ·

  46. Mersin Giyim Author Editor

    Bravo, wonderfull..

    ·

  47. Karen Author Editor

    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?

    I love your design!

    ·

  48. Nikhil malhotra Author Editor

    Thats just fantastic technique.Cool one

    ·

  49. iTechRoom Author Editor

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

    ·

  50. Neldoreth Author Editor

    How can i modified this wanderfull script for make the curtain open without click the repo… for example, one second after the page is loaded??? thanks.

    ·

  51. Vasanth Kumar Author Editor

    Hi, It’s really amazing, Initially Curtain is closed in this stage, how can i write the js code to open the curtain automatically, when script is loaded ( without clicking the pull me image ) ????????

    ·

  52. Vasanth Kumar Author Editor

    @Neldoreth … make the curtain open without click the repo ….. In your html page, replace this js script line $(“.rope”).click(function(){ with $(window.onload=function(){ …. its working .. cool Automatic curtain open without click the repo.

    ·

    • Jim Weinberg Author Editor

      John,

      Is there a way to delay the opening for 2-3 seconds?

      ·

  53. John Tyler Author Editor

    I wanted to have the curtain open for one of my websites, and then when it opened, I wanted whatever I hung on the rear curtain (in this case a Projection TV) to have an ENTER button and then people could click on ENTER and f=go right to my site. Nishanth Thomas gets the credit for helping me. He told me to go into the html…temporarily change the left curtain size from 50% to 30 and the right curtain from 51% to 31%. Then, when your html editor (in my case Front Page) exposes the site in “Normal” – (I have “Normal” then “HTML” and “Preview” – you can see the redesigned buildinter.png. Then, I could click on that rear curtain and add a hot spot to the word ENTER. I also played around with a redesign of the buildinter.png, but always launched it and called it buildinter.png…no matter what I built there for the buildinter. Just delete the original buildinter and make your own. Leave it as a png…like a gif – transparent background so it will blend in with the curtain behind…otherwise, nothing looked right.
    I also did it to http://www.JohnTyler.com because it’s cool!

    ·

  54. John Tyler Author Editor

    Another cool thing was done using the curtain. The goal was to add a video player and have the main curtain open snugly next to the player. The rope instructs the web guest to click to open the curtain the rest of the way. The goal was also to add a banner over the video (Country Music for YouTube), and have a link on that panel to direct viewers to my YouTube Channel. All was accomplished.
    http://www.johntyler.com/Songs-Index.html is the link to that test site.
    Apparently, yo can do almost anything with this curtain and develop any kind of web site from it. If you can dream it, it should be able to be done manipulating the html code.
    John Tyler

    ·

  55. Sacramento Wedding Photographer Author Editor

    Wow! This is an amazing effect, thanks for sharing and for providing such a great walk-thru of the code!

    ·

  56. Jean Author Editor

    Very nice images. All works well. Can I open the curtain with one button and close it with another? I tried to change the else to close the curtain in a new function, but that didn’t work.

    ·

  57. Jean Author Editor

    Sorry for the question above. I’ve made a mistake in the code. You can open the curtain with one button and close it with the other, no problem!

    ·

  58. Jabi Author Editor

    Very cool!! :)

    A tiny improvement:
    turn off outline (as said before), and prevent default browsers behaviour dragging the image:

    $(“a.rope”).css(“outline”,”none”).bind(“mousedown”,function(e) {
    e.preventDefault();
    });

    ·

  59. Ranjit Author Editor

    Wow.. Wonderful. Like it.

    ·

  60. mistik Author Editor

    Hello! First of all i want to congratulate you for your great work! Second of all i want to know what can i do to appear youtube filmes and photobucket slideshows behind the curtains and not on top of them?? I expect your answer as soon as posible!!

    ·

  61. threebrain Author Editor

    you rock! :D

    ·

  62. Marius Patrascu Author Editor

    Great! BTW: I never find your demo link, always forget it’s there and I search at the end of the articole :)

    ·

  63. choo Author Editor

    wow It Nice thank

    ·

  64. curtainburgler Author Editor

    First, awesome demo, thanks.

    Second, do you mind if I use frontcurtain.jpg on a commercial website? Thanks in advance!

    ·

  65. edrien Author Editor

    Hi, this scripts its really nice… but i’m trying to put this on my wordpress page and when I do, something its breaking another script… I don’t know how… could you email me or something? maybe you could make it as a plugin for wordpress? that would save my life…

    ·

  66. Will Author Editor

    I love this script. But during the opening and closing of curtains, the curtains look jagged in IE8. Its perfect in Firefox.

    Did I miss out anything or someone can advise? Thank you very much.

    ·

  67. greetings Author Editor

    wow…nice effects..thanks

    ·

  68. mohamed Author Editor

    great tutorial and curtains :D
    are those graphics for free ? so i can use them on my project before selling it?
    thanks

    ·

  69. Raghavendra Author Editor

    cool demo, thanks.

    ·

  70. Rahul R Author Editor

    its amazing.. HOw did u managed to do that

    ·

  71. Susie Author Editor

    Hey Sam, I love it… I’m a total newbie to js but was wondering if it’s possible to have the curtains close then open again when someone clicks on a menu navigation button..? ie. to have the curtains close and open between pages…? Am building a site for a performer who would love to have the curtains between pages. I look forward to hearing if you think it’s possible… Thanks

    ·

  72. Mohammed Author Editor

    Thanks for the wonderful script. I tweaked it a bit and turned it into a portfolio.

    http://web.njit.edu/~gam6

    Comments are welcome :D

    ·

  73. James Author Editor

    Great script! How it can load withoud rope, to load with pages directly? Thank you!

    ·

  74. Clocktower Media Author Editor

    Perfect! Just what I needed for a theater site I’m helping with. Such a good resource, thanks!

    ·

  75. onit Author Editor

    fantastic tips. We love wordpress and use jQuery lots.

    ·

  76. dlynne Author Editor

    Hi all,
    great effect! I’d like to have this effect open over a website homepage, but not sure how to do it, as I’m a newbie at this – can anyone give some advice? thanks in advance, really appreciate it -
    Lynne

    ·

  77. martin Author Editor

    Neat script. In IE9 the footer is actually behind the curtain and half way up the page. IN Chrome it looks like I imagine it should – as a FOOTER…… anyone know how to make it look the same in both IE9 and Chrome etc……. also if anyone knows how to get the script to close after clicking on a link before it loads a new page please email me: [email protected] many thanks in advance!

    ·

  78. Mitch Powell Author Editor

    Sorry if this was covered somewhere before, but I’m unfamiliar with putting an anchor tag in the midst of a script tag. Do I need to remove this so the src=the URL to the easing script?

    How can an anchor tag be the value of an attribute in a script tag?

    Thanks,
    Mitch

    ·

  79. Tiredmouse Author Editor

    Super tutorial! I learned a lot from this….thanks.

    ·

  80. editor Author Editor

    Türkiye’nin ücretsiz domain ve hosting hizmetleri, Hizla genisleyen ailemize sizde katilin. bedava web siteniz olsun, hiç para ödemeden 1 günde.
    name.con.Tc

    ·

  81. sahil Author Editor

    cheep web hositng in pakistan -seo pkaistan-domain in pakistan

    http://www.itplane.com

    ·

  82. editor Author Editor

    great, thanks for sharing.

    ·

  83. 365ink Author Editor

    Thanks for this, it’s taught me a lot.

    ·

  84. watch-site Author Editor

    Great info. Thanks.

    ·

  85. nguhomelettings Author Editor

    A lot of new things to learn from this tutorial.

    ·

  86. Ian Davis Author Editor

    Where is live demo? Thanks.

    ·

    • Sam Dunn Author Editor

      The demo link is in the top of the left column

      ·

  87. Sacramento Wedding Photographer Author Editor

    Superb demo! Thanks!

    ·

  88. Ralph Author Editor

    Hi! Thanks! This is really helpfull! I would like to make it open without “click”. Is it possible to open once I enter the site?

    ·

  89. Andrew Author Editor

    Excellent tutorial, I also have the same question as Ralph, is there code to make it open after a few seconds of loading?

    ·

  90. Michael Author Editor

    I’m not a professional, and use Sitebuilder for my sites. I really want to build a site for a performing arts club I am in and would like the home page to be a curtain like this that opens. I downloaded the zip file and extracted and tried the HTML in Sitebuilder, but really have no clue what I am doing past that. Needless to say, nothing happened. Is there an easy way to get this effect on my page with Sitebuilder? Thanks, Mike

    ·

  91. Mivadesign Author Editor

    Very cool effect !

    ·

  92. aditya Author Editor

    Hi,
    in stead of image behind the curtain i want to put a flash movie. How will i do that.
    replacing line

    with the swf object did not help. movie appears on top.

    Please help
    Thanks

    ·

  93. aditya Author Editor

    How did u embed flash object behind the curtain i.e in between the background and the curtain?
    Please help with code. i need it urgently.
    thanks

    ·

  94. Greg Author Editor

    Wonderful creation Sam. I’m just wondering if you happen to have PSD files for the curtain images and rope. That would be very helpful. I’m really looking forward to working with this design for a non-profit theatre group that desperately needs to get away from their flash based site. You have many other great examples in your tutorials that will also help enhance their site. Thanks for sharing!

    ·

    • Sam Dunn Author Editor

      Thanks Greg! While I no longer have the PSD files available, I do wish you the best of luck with your project.

      ·

  95. Greg Eff Author Editor

    Thanks for the reply Sam and thanks again for the code. This really is a cool animation effect. I even managed to open the curtain automagically by adding a simple line of code (and look forward to manipulating it further for mobile use):

    $(document).ready(function() {

    $curtainopen = false;

    $(“.rope”).click(function(){
    $(this).blur();
    if ($curtainopen == false){
    $(this).stop().animate({top: ’0px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
    $(“.leftcurtain”).stop().animate({width:’60px’}, 2000 );
    $(“.rightcurtain”).stop().animate({width:’60px’},2000 );
    $curtainopen = true;
    }else{
    $(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
    $(“.leftcurtain”).stop().animate({width:’50%’}, 2000 );
    $(“.rightcurtain”).stop().animate({width:’51%’}, 2000 );
    $curtainopen = false;
    }
    return false;
    });
    $(“.rope”).trigger(‘click’);

    });

    ·

  96. John Author Editor

    I didn’t see a demo anywhere and when I clicked it nothing happened. Is it no longer working or…? Thanks for any info.

    ·

  97. Dave Author Editor

    Hi,
    great tutorial but I have an issue that my Nav Bar (CSS based) always comes out on top of the curtain. It’s not an object so it should be under the curtain. I tried making a new Div to separate them but that didn’t work. Please advise!

    ·

  98. Dave Author Editor

    I also have another issue that I cant put anything/content under the curtain like a footer bar, etc…

    ·

  99. Navneet Author Editor

    Very nice tutorial.. Thanks man.. :)

    ·

  100. oyun Author Editor

    animate curtains opening with jquery tutorial is awesome.thanx for sharing.

    ·

  101. David Proctor Author Editor

    I’m running the same version of Firefox and the end result worked perfectly. Thanks for the tutorial, I’m new to jquery and your tutorials are a real help.

    ·

  102. chris Author Editor

    Thank you, What is the best way to have the curtain open onload? I added

    $().ready(function() {
    $(‘#rope’).click();
    });

    and gave the image an Id

    id=”rope”

    it works but i work but i am new to Jquery

    Thank you for the tutorial

    ·

  103. Priya Author Editor

    Hi, I facing an problem when I put the place the right , left curtain div within a main div say video_container:

    here’s the code:


    ___________________________________________________________

    It works well when its in the body tag..Please help…Thanks in advance

    ·

  104. zcd Author Editor

    good!

    ·

  105. burin Author Editor

    thank for the best good list i like it sir

    ·

  106. joe Author Editor

    great tutorial! Is the any way to have this work up and down instead of left to right

    ·

  107. Design studio ProGrafika Author Editor

    no search demo

    ·

  108. Tahir Author Editor

    Great Job………!!

    I like your work………………….!!

    Thank you SAM

    ·

  109. Tarmac Author Editor

    Thanks for this Sam. I used it to launch the Birmingham Faith Map (UK) yesterday – http://www.birminghamfaithmap.org.uk/launch.html – it was a City Council thing and needed a bit of ‘ceremony’. Went down well. Cheers, Tarmac (aka John McAdam)

    ·

  110. Steph Author Editor

    In ie9 the content underneath disappears. I tracked it down to the .content class, removed display:none and that fixed it. I think perhaps that was there in the first place for people with slow connections who might load the content underneath first…based on the code comment..small sacrifice considering ie9 market share right now

    ·

  111. lyly Author Editor

    great tutorial man, using this to help design my company’s christmas site. (: thanks to you!

    ·

  112. kanishk Author Editor

    hi sam dunn
    I used your theme. It was damn good but i found that it wasn’t work in internet explorer.
    you have any solution for that.
    i am waiting for your generous reply.
    please reply me ASAP.

    Thank you
    Kanishk

    ·

    • ashley Author Editor

      Did you ever get this to work in IE?

      ·

  113. kanishk Author Editor

    hi sam dunn
    I used your theme. It was damn good but i found that it wasn’t work in internet explorer-9.
    you have any solution for that.
    i am waiting for your generous reply.
    please reply me ASAP.

    Thank you
    Kanishk

    ·

  114. ferris Author Editor

    Very cool tutorial! Thanks!
    Apologies if this has been asked elsewhere but, could you tell us what your policy is for using your code & images on our own projects?

    ·

  115. Padasalgi Author Editor

    Is it posible to put slide show inside the curtain insted of an image.
    thanks

    ·

  116. serge Author Editor

    Fantastique je recherchais ca pour un site d’une association pour le théatre et voila se script un grand merci. Je ne connais pas le jquery et voila ma question.
    quand on va sur ma page en construction http://troupesenscenes.voila.net on clique sur le rideau pour l’ouvrir mais j’aimerais que pour mes autres pages le rideau puisse s’ouvrir tout seul exemple quand je clique sur le lien présentation le rideau puisse s’ouvrir seul. est ce possible set si oui comment ?? MERCI

    ·

  117. serge Author Editor

    grieved for my English but how is that the curtain opens automatically???
    thank you

    ·

  118. Lukas B. Author Editor

    Hey, I thinked it would be cool if the curtain “remembers” its state.
    The new sessionStorage is a nice way:

    $(document).ready(function() {
    if(sessionStorage.getItem(“vorhang”) == null){
    sessionStorage.setItem(“vorhang”,”false”);
    }
    if(sessionStorage.getItem(“vorhang”) == “true”){
    $(“.rope”).stop().animate({top: ’0px’ }, {queue:false, duration:0, easing:’easeOutBounce’});
    $(“.leftcurtain”).stop().animate({width:’60px’}, 0 );
    $(“.rightcurtain”).stop().animate({width:’60px’},0 );

    }
    $(“.rope”).click(function(){
    $(this).blur();
    //$curtainopen=localStorage.getItem(“vorhang”);
    if (sessionStorage.getItem(“vorhang”) == “false”){
    $(this).stop().animate({top: ’0px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
    $(“.leftcurtain”).stop().animate({width:’60px’}, 2000 );
    $(“.rightcurtain”).stop().animate({width:’60px’},2000 );
    sessionStorage.setItem(“vorhang”,”true”);
    }else{
    $(this).stop().animate({top: ‘-40px’ }, {queue:false, duration:350, easing:’easeOutBounce’});
    $(“.leftcurtain”).stop().animate({width:’50%’}, 2000 );
    $(“.rightcurtain”).stop().animate({width:’53%’}, 2000 );
    sessionStorage.setItem(“vorhang”,”false”);
    }
    return false;
    });

    });

    One point I haven’t fixed yet is to make a cooler way to restore the old status of the curtain. At the moment I run the part funktions to open it in a short time… on slow browsers this maybe cause a flashing before the curtain is open again.
    Maybe somebody has an other idea.

    ·

    • Jan Author Editor

      Perhaps you can help me? :o)

      ·

  119. serge Author Editor

    how is that the curtain opens all alone?? please it’s urgent et je n’y comprends plus rien
    merci

    ·

  120. tota Author Editor

    amazing!!!!

    ·

  121. Prodyot Author Editor

    A superb and awesome tutorial.
    This template has very utilities and I will ever remain grateful and indebted to you for waling me through the process and also facilitating the download.
    When I use it in my projects I will inform you about it.
    Thanks again for the tutorial and sharing the product.

    ·

    • Prodyot Author Editor

      A superb and awesome tutorial.
      This template has many utilities and I will ever remain grateful and indebted to you for walking me through the process and also for facilitating the download.
      When I use it in my projects I will inform you about it.
      Thanks again for the tutorial and sharing the product.

      -post re-sent with typos in the earlier post taken care of :)

      ·

    • Jan Author Editor

      Perhaps you can help me ? :o)

      ·

  122. Axel Ferdinand Author Editor

    Hi there! Nice tut.. Is it possible to make the curtains open auto when content inside curtains are loaded fully? AND: is it possible to animate the curtains so they open vertically instead, from the middle to the top/bottom?

    Thank you!

    ·

  123. katy lavallee Author Editor

    Wow, I was just asked to add this effect to a site like 10 minutes ago and this is the first thing I found and it looks perfect. Sweet!

    ·

  124. Albert Author Editor

    Amazing….Thanx a lot….

    ·

  125. العاب سيارات Author Editor

    Next time I just read your site, I hope that it doesnt disappoint me around that one. After all, Yes, it was my option to read, however actually thought youd have something interesting to state. All I hear is a lot of whining about something that you could fix in the event you werent too busy trying to find attention.

    ·

  126. Inspirational Quotes Author Editor

    Animate Curtains Opening with jQuery | Build Internet I was recommended this web site by my cousin. I’m not sure whether this post is written by him as no one else know such detailed about my problem. You are wonderful! Thanks! your article about Animate Curtains Opening with jQuery | Build Internet Best Regards Veronica Schaad

    ·

  127. Aubrey Patzner Author Editor

    I’ll gear this review to 2 types of people: current Zune owners who are considering an upgrade, and people trying to decide between a Zune and an iPod. (There are other players worth considering out there, like the Sony Walkman X, but I hope this gives you enough info to make an informed decision of the Zune vs players other than the iPod line as well.)

    ·

  128. infonomics Author Editor

    Fantastic work accompanied with gratuity. Few could ask for more.

    ·

  129. Louis Vuitton Monogram Empreinte SC Bag Supple Calf Leather Asphalt M93455 Sale Author Editor

    Hello there, You’ve done a fantastic job. I’ll definitely digg it and personally suggest to my friends. I am confident they will be benefited from this website.

    ·

  130. Saikumar Author Editor

    Its not working now…
    Please clear the problem. And look for compatibility in all browsers

    ·

  131. Jim Weinberg Author Editor

    I don’t know if you’re still monitoring this site, but if you are, is there any way to delay the appearance of the rope for a specified length of time?

    Thanks,
    Jim

    ·

  132. Jeff Lane Author Editor

    Do you have to have the rope, can the you set the curtains to open just after the page opens.
    Jeff Lane

    ·

  133. Jim Weinberg Author Editor

    Jeff.

    Thanks for the replay. I don’t need the rope if I can delay the opening of the curtains another way. I don’t want them to open onload, because I’m doing something else first that takes about 20 seconds.

    Jim

    ·

  134. LikeVietnam.com.vn Author Editor

    it’s cool. I like it.
    LikeVietnam.com.vn

    ·

  135. Dheeraj Author Editor

    Nice explanation. Definitely, try it out in my website homepage.
    Thanks !
    Great job!

    ·

    • Jan Author Editor

      Perhaps you can help me Dheeraj? :o)

      ·

  136. Vaibhav Author Editor

    Great stuff .. Helped a lot ….

    ·

  137. ashley Author Editor

    I’m having issues with the curtains not closing correctly in internet explorer. Can someone please email at ashmarie@artlanta some tips.

    THANKS!

    ·

  138. Idee Author Editor

    Waw, very nice effect

    ·

  139. Virat Kothari Author Editor

    Hello Sam,

    Wonderful thing I ever found! Lovely! Thanks for such a nice a nice contribution.

    ·

  140. Jan Author Editor

    Wauuu what a great effect, I would like to use it on my website,

    You are all alowed to laugh out loud now while reading my post….. I’ve never ever coded in my life, so please be gentle ;o)

    But I don’t understand how to make it work, I can see 3 boxes with code, I can copy and paste the code into 3 documents, but which name should the file have are they just pasted into notepad or simular plain text app.?

    Can someone please help me creating the files, telling me how and where to place the files etc. I need everything to make it work…. :o/

    Thanks you so much for helping me.

    Br. Jan, Denmark

    ·

  141. cute video club Author Editor

    i hope i will use it to my website nice effects !!!

    ·

  142. kishore Author Editor

    wow awesome…. its really good…
    i never seen before like this plugin with ie7 compatibility….
    Good work dude…..

    ·

  143. kishore Author Editor

    thanks man……
    its very use full for me…..

    ·

  144. noname Author Editor

    Great work! I was wondering is this tutorial free for commercial use and what is the license? Thanks.

    ·

  145. Neil Eneix Author Editor

    Appreciate the tutorial!

    ·

  146. Jon Day Author Editor

    Plain and simple: you are the man!

    ·

  147. Nitin Shrivastava Author Editor

    Great work!! Really nice jquery. It works very well in Firefox, Chrome and safari. In IE version 7 & 8 its working but it shows border line all around the pull rope image. Also in opera it is not working.

    ·

  148. cuva Author Editor

    wonderful piece of work,superb tutorial !!
    is this free to use? can we use this in our website?

    ·

  149. Riyana Author Editor

    Wow, this is great. I ll try this out. Thank you so much. :-)

    ·

  150. kalli Author Editor

    Hello,
    really good script,
    but in IE9, the curtain is not closed.
    Firefox is ok.
    can someone help me?

    ·

  151. kolja Author Editor

    AWSOME JOB !!!

    ·

  152. hina Author Editor

    awesome! I love this effect!
    Can I change a part of it and use it for commercial use?
    Please let me know.
    Thank you.

    ·

  153. skylark Author Editor

    thank you so much for this free gift..im loving it

    ·

  154. Ann Joseph Author Editor

    Awesome tutorial friend. Hope to see more such good and inspirational tutorials.

    ·

  155. gateway Author Editor

    i cant work it on my imvu website pls help..thank you

    ·

  156. ionezz Author Editor

    good effect :D

    ·

  157. Mitchell Author Editor

    I get stuck from the start i was using webs.com as my site builder and i am confused i will be useing wix (hopefully) so can you make a VIDEO on how to do it wix or webs.
    Please reply.
    Mitchell

    ·

  158. abram Author Editor

    Hi, please help I saw Curtains Opening jquery tutorial and I want to use this on my wordpress home page, where do I paste this codes in my wordpress home page?

    ·

  159. fcostantino Author Editor

    Check out this brand new example… i think that the effect is much more realistic that the example on this page.
    https://github.com/fcostantino/opening-curtain-real-effect-using-sprite

    ·

  160. steve Author Editor

    This is awesome. I used it straight from the files. Modified the size a little bit and it’s perfect. THANK YOU for this!

    ·

  161. Jan Willem Author Editor

    Loved this curtain thing and used it, very funny. jQuery rocks! Hope to find more articles from you on the internet about jQuery!

    Easy to use! Thanks!

    ·

    • skylark Author Editor

      can you please teach me how can i use it on my website?

      ·

  162. Carmine Moras Author Editor

    r style for this season is the short pixie haircut. These haircuts can make you feel much better than any other haircut because first of all it is trendy, cute, and easy to maintain during the summer. The pixie haircut brings attention to your facial features, and if that is what you were looking for then the pixie haircut is the perfect for you.4Another hai

    ·

  163. yogesh aher Author Editor

    awesome tutorial.

    Thank you for sharing this.
    Hope to see more of this..

    ·

  164. Carolina Author Editor

    Thank you so much for your tutorial!
    I was having a very hard time trying to figure out from scratch how to create the opening curtains, as a Dreamweaver beginner it was indefinably tough.
    It took me all afternoon to figure out the jquery language and where to place everything in the code, specially because I had to go learn about the specifics in other tutorials, my fault for trying something too advanced for my knowledge, but I GOT IT! So thanks to you!!!!
    You made my day! Oh… and not giving up helped too!
    THANKSSS

    ·

  165. Ashok Author Editor

    Hi sam dunn, can i use this animation to my client project freely ?

    ·

  166. Nelson Author Editor

    Hello, first of all, great tutorial.
    I have a question, I’m a noob in javascript and not understanding much, when I click on the rope, the curtain opens is crushed. is it possible that the two panels each slide on its side without distortion?
    Sorry for my bad english, I hope u understand what i mean.
    Thanks

    ·

  167. g Author Editor

    i really like it….

    very very nice and beautiful…..

    ·

  168. Infant Author Editor

    Hey, can this be used in word press page.

    ·

  169. Sat Lavadoras Author Editor

    Nice efect . I test new …

    ·

  170. Yuval Author Editor

    I can’t get this to work. Maybe I am not using the latest version of Jquery.

    ·

 

Build Internet by One Mighty Roar. Since 2008.