[Summary view] [Print] [Text view]

   1  (function () {
   2      window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
   3  
   4      var field    = document.getElementById( 'bbp-badge' ),
   5          bee      = document.getElementById( 'bbp-bee'   ),
   6  
   7          max_x    = field.clientWidth  - bee.offsetWidth,
   8          max_y    = field.clientHeight - bee.offsetHeight,
   9          angle    = 95,
  10          offset   = 95,
  11  
  12          duration = 4,
  13          canvas   = 50,
  14          start    = null,
  15          variance = 1;
  16  
  17  	function step( timestamp ) {
  18          var progress, x, y;
  19  
  20          if ( start === null ) {
  21              start    = timestamp;
  22              variance = 1;
  23              angle    = 95;
  24          }
  25  
  26          progress = ( timestamp - start ) / duration / 1000;
  27          angle    = ( 360 * progress ) + offset;
  28  
  29          x = variance * Math.sin( progress * 2 * Math.PI );
  30          y = Math.cos( progress * 2 * Math.PI );
  31  
  32          bee.style.left            = max_x / 2 + ( canvas * x ) + 'px';
  33          bee.style.bottom          = max_y / 2 + ( canvas * y ) + 'px';
  34          bee.style.transform       = 'rotate(' + angle + 'deg)';
  35          bee.style.webkitTransform = 'rotate(' + angle + 'deg)';
  36  
  37          // Reset
  38          if ( progress >= 1 ) {
  39              start = null;
  40          }
  41  
  42          requestAnimationFrame( step );
  43      }
  44  
  45      requestAnimationFrame( step );
  46  })();