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.