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