Armazém

Armazém Anim

by António Almeida

HTML

<div id="logo"></div>
<div style="height:2000px;"></div>

CSS

#logo {
  background-image: url('http://i.imgur.com/tvQzqqN.png');
  width: 405px;
  height: 100px;
  margin: 20px auto;
  transform: scale(1,1);
}
#logo.f0 { background-position: 0 0; }
#logo.f1 { background-position: 0 -100px; }
#logo.f2 { background-position: 0 -200px; }
#logo.f3 { background-position: 0 -300px; }

JavaScript

// -------------------  Tweaks  ----------------------------
var frameRate = 20,			// Frame Rate
    nFrames = 4,				// Frames do css
    minFrames = 10,			// Minimo de frames de CADA animação
    maxFrames = 20,			// Máximo "		"		"
    minTimeAnim = 2,		// Minimo de tempo ENTRE animações
    maxTimeAnim = 4,		// Máximo "		"		"
    autoAnim = true;		// Animar automaticamente
// ---------------------------------------------------------

(function autoAnimTimer(){
  if(autoAnim){window.setTimeout(autoAnimTimer, 1e3*rand(minTimeAnim,maxTimeAnim));anim()}
})();

function anim(){
  for(i=f=rand(minFrames,maxFrames);i;i--)
    window.setTimeout("$('#logo').removeClass().addClass('f"+rand(0,nFrames)+"')",i*(1000/frameRate));
}

function rand(min,max){return min+Math.floor(Math.random()*(max-min))}

// Events
$("#logo").on("click mouseover", anim);
$(window).scroll(anim);