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">
#verticalBars{position:fixed;top:0;left:0;right:0;bottom:0;z-index:8008;pointer-events:none}#verticalBars .bar{position:absolute;top:0;background:#000;width:20%;height:150%;-webkit-transition:all 2s ease-out;transition:all 2s ease-out}#verticalBars .bar:nth-child(even){top:auto;bottom:0}#verticalBars .bar.out{height:0}
</style>
<script>
(function() {
var verticalBars = document.createElement('div');
verticalBars.id = 'verticalBars';
document.body.appendChild(verticalBars);
for (var i = 0; i < 5; i++) {
var bar = document.createElement('div');
bar.className = 'bar';
bar.style.left = i * 20 + '%';
verticalBars.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