Boxing Away Page Intro Animation

The page loads with a number of boxes on top and they are each removed to reveal the content beneath.

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

<!-- Boxing away effect provided by http://www.top-site-list.com --> <style type="text/css"> .boxAway{position:fixed;top:0;left:0;right:0;bottom:0;z-index:8008;pointer-events:none} .boxAway div{background:#000;width:20%;height:20%;float:left} </style> <!-- jQuery is required if you're not already using it --> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> (function() { (function($) { $.fn.random = function() { var n = this.length; var r = Math.floor(n * Math.random()); return n ? $(this[r]) : $(); }; })(jQuery); $('body').prepend('<div class="boxAway"></div>'); for (var i = 0; i <25; i++) { $('.boxAway').append('<div/>'); } (function iterate() { $('.boxAway div:not(.transitioned)').random().animate({opacity:0}, 100, function() { $(this).addClass('transitioned'); if ($('.boxAway div:not(.transitioned)').length < 1) { $('.boxAway').remove(); } else { iterate(); } }); })(); })(); </script>
More scripts

Do you want to expose your site to millions?
Do you want to be ranked higher in Google?
Do you want to be known as the best site in your niche?

Then look no further. Add your site in 3 simple steps. Sign up, Add your site and Start receiving votes! It only takes 10 seconds!

Sign Up to Top Site List Planet Now!

Login with one of these social networks...

Sign in with FacebookSign in with TwitterSign in with Google+Sign in with Yahoo!Sign in with LinkedIn

or create an account with your email...

Login To An Existing Account