JSFiddle - React, Tailwind, and code Playground
by dafin defandaky
December 17, 2014
HTML
<div class='error-404'>
<span class='ref-0' data-delay='282'></span>
<span class='ref-1' data-delay='340'></span>
<span class='ref-2' data-delay='0'></span>
<span class='ref-3' data-delay='4'></span>
<span class='ref-4' data-delay='381'></span>
<span class='ref-5' data-delay='485'></span>
<span class='ref-6' data-delay='5'></span>
<span class='ref-7' data-delay='437'></span>
<span class='ref-8' data-delay='15'></span>
<span class='blank ref-9'></span>
<span class='ref-10' data-delay='339'></span>
<span class='ref-11' data-delay='468'></span>
<span class='ref-12' data-delay='601'></span>
<span class='ref-13' data-delay='55'></span>
<span class='ref-14' data-delay='224'></span>
<span class='ref-15' data-delay='385'></span>
<span class='ref-16' data-delay='2'></span>
<span class='ref-17' data-delay='1'></span>
<span class='blank ref-18'></span>
<span class='blank ref-19'></span>
<span class='ref-20' data-delay='28'></span>
<span class='ref-21' data-delay='132'></span>
<span class='ref-22' data-delay='327'></span>
<span class='ref-23' data-delay='285'></span>
<span class='ref-24' data-delay='74'></span>
<span class='ref-25' data-delay='3'></span>
<span class='ref-26' data-delay='611'></span>
<span class='ref-27' data-delay='50'></span>
<span class='blank ref-28'></span>
<span class='blank ref-29'></span>
<span class='blank ref-30'></span>
<span class='ref-31' data-delay='289'></span>
<span class='ref-32' data-delay='139'></span>
<span class='ref-33' data-delay='29'></span>
<span class='ref-34' data-delay='57'></span>
<span class='ref-35' data-delay='94'></span>
<span class='ref-36' data-delay='133'></span>
<span class='ref-37' data-delay='161'></span>
<span class='blank ref-38'></span>
<span class='blank ref-39'></span>
<span class='ref-40' data-delay='257'></span>
<span class='ref-41' data-delay='286'></span>
<span class='ref-42' data-delay='335'></span>
<span class='ref-43' data-delay='359'></span>
<span class='ref-44' data-delay='382'></span>
<span class='ref-45'...
CSS
.error-404{width:800px;height:110px;position:absolute;top:50%;left:50%;margin:-55px auto auto -400px;overflow:hidden}.error-404 span{display:block;float:left;width:9px;height:9px;margin:0 1px 1px 0;background-color:darkred;opacity:0}
.error-404 .blank{background:none}.error-404 .blank.nf-text{background-color:darkred}
@media (max-width:800px){.error-404{width:400px;height:55px;margin:-28px auto auto -200px}
.error-404 span{width:4px;height:4px}}
@media (max-width:400px){.error-404{width:240px;height:33px;margin:-17px auto auto -120px}
.error-404 span{width:2px;height:2px}}
JavaScript
(function(d){var e=d(window),c=d(".error-404 span"),b=d(".error-404 span[data-delay]"),a=b.length;c.css("opacity",0);e.on("load",function(){b.each(function(){var f=d(this),g=parseInt(f.data("delay"),10);setTimeout(function(){f.animate({opacity:1},600)},g*50)});setTimeout(function(){c.each(function(f){if(!d(this).attr("data-delay")){d(this).attr("data-delay",f)}var g=d(this),h=parseInt(g.data("delay"),10);setTimeout(function(){if(g.hasClass("nf")){g.addClass("nf-text").animate({opacity:1},800)}else{g.animate({opacity:0.02},800)}},h*10)})},(a*50)+1000)})})(jQuery);