Kappa animation

kappa-animation.markdown

Kappa animation

A Pen by Richard Leishman on CodePen.

License.

script.js

 var icon = 'http://i.imgur.com/Q8oVmfi.png';
 var speed = 40;
 var kappa_count = 20;
 var kappa_size = range(40, 100, 1);
 var kappa_steps = 0;
 var kappa_gap = 1000;
 var kappa_shake = 10;
 (function($) {
   kappa();
 })(jQuery);

 function kappa() {
   for (var i = 1; i <= kappa_count; i++) {
     if (kappa_steps >= (kappa_gap * i) && $('#kappa' + i).length < 1) kappa_create(i);
     var kappa = $('#kappa' + i);
     if (kappa.length) {
       var window_width = $(window).width();
       var window_height = $(window).height();
       if (kappa.data('step') == 0) {
         // Kappa birth
         kappa.css('opacity', 0);
         var kappa_left = Math.floor((Math.random() * (window_width - kappa.width())));
         var kappa_top = window_height - kappa.height();
         kappa.css('left', kappa_left);
         kappa.css('top', kappa_top);
       } else if (parseInt(kappa.css('top')) <= (parseInt(kappa.height()) * -1)) {
         // Kappa off the top
         kappa.css('opacity', 0);
         kappa.data('step', -1);
       } else {
         // Kappa float up
         if (kappa.data('step') <= 100) {
           kappa.css('opacity', kappa.data('step') / 30);
         }
         kappa.css('top', parseFloat(kappa.css('top')) - 3);
         kappa_shakey(kappa);
       }
       kappa.data('step', kappa.data('step') + 1);
     }
     kappa_steps++;
   }
   setTimeout('kappa()', speed);
 }

 function kappa_create(num) {
   var size = kappa_size[Math.floor(Math.random() * kappa_size.length)];
   $('body').append('<img id="kappa' + num + '" data-step="0" class="kappa" src="' + icon + '" style="opacity: 0; width: ' + size + 'px" />');
 }

 function kappa_shakey(kappa) {
   if (parseInt(kappa.css('margin-left')) >= kappa_shake) kappa.data('shake', 'left');
   else if (parseInt(kappa.css('margin-left')) <= (kappa_shake * -1)) kappa.data('shake', 'right');
   if (kappa.data('shake') == 'left') var direction = -1;
   else var direction = 1;
   var margin_left = parseInt(kappa.css('margin-left')) + direction;
   kappa.css('margin-left', margin_left);
 }

 function range(start, stop, step) {
   var a = [start],
     b = start;
   while (b < stop) {
     b += step;
     a.push(b)
   }
   return a;
 };

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

.kappa {
  position: absolute;
}