About This Script
Paste the code below inside the <head> tag on your page to use this on your site.
Demo
You will see the effect when you load this page. Refresh the page to see it again.
Code
<!-- Curtain effect provided by http://www.top-site-list.com -->
<style type="text/css">
#horizontalBars{position:fixed;top:0;bottom:0;left:0;right:0;z-index:8008;pointer-events:none}#horizontalBars .bar{position:absolute;top:0;background:#000;width:150%;height:20%;-webkit-transition:all 2s ease-out;transition:all 2s ease-out}#horizontalBars .bar:nth-child(even){left:auto;right:0}#horizontalBars .bar.out{width:0}
</style>
<script>
(function() {
var horizontalBars = document.createElement('div');
horizontalBars.id = 'horizontalBars';
document.body.appendChild(horizontalBars);
for (var i = 0; i < 5; i++) {
var bar = document.createElement('div');
bar.className = 'bar';
bar.style.top = i * 20 + '%';
horizontalBars.appendChild(bar);
}
setTimeout(function(){
var elements = document.getElementsByClassName('bar');
for (var i = 0, element; element = elements[i]; i++) {
element.className += ' out';
}
},500);
})();
</script>
More scripts