JqueryNo Comments

default thumbnail

Using jquery, we can make the curtain effect while reloading the page. Here is the below code to make curtain effect.

HTML

<div class="animate-box">
    <div class="left-part"></div>
    <div class="right-part"></div>
</div>

CSS

.animate-box{ position:fixed; top:0px; left:0px; right:0px; bottom:0px; z-index:999;}
.animate-box .left-part{ background:#c1272d; width:50%; height:100%; transition:0.5s; float:left;}
.animate-box .right-part{ background:#c1272d; width:50%; height:100%; transition:0.5s; float:right; }

Jquery

$(document).ready(function(){
	$(".left-part").animate({width:"0px"});
	$(".right-part").animate({width:"0px"});
	
	setTimeout(
	  function() 
	  {
		$(".animate-box").hide();
	  }, 2000);
})

Be the first to post a comment.

Add a comment