KdjOGr

index.html

<!-- ADD A JACOB -->
<button class="js-add-one">Add a Jacob</button>
<button class="js-add-ten">Add 10 Jacobs</button>
<button class="js-add-hundred">Add 100 Jacobs</button>
<div>
  <span class="counter">4</span> Jacobs
</div>

<div class="jacob left">
</div>
<div class="jacob down">
</div>
<div class="jacob right">
</div>
<div class="jacob up">
</div>

<!-- Artwork: David Stout http://codepen.io/davidastout3/ -->

kdjogr.markdown

KdjOGr

A Pen by Drew Conley on CodePen.

License.

script.babel

const directions = ["left", "down", "up", "right"];
let count = 4;

let appendJacob = function() {
  const dir = directions[Math.floor(Math.random()*directions.length)];
  let jacob = $('<div class="absolute jacob"></div>').addClass(dir).css({
    left: Math.floor((Math.random() * 600) + 1) + "px",
    top: Math.floor((Math.random() * 600) + 1) + "px"
  });
  $('body').append(jacob);  
}


$('body').on('click', '.js-add-one', () => {
  
  appendJacob();
  
  count+=1;
  $('.counter').text(count);
});

$('body').on('click', '.js-add-ten', () => {
  
  for (var i=0; i<=9; i++) {
    appendJacob();
  } 
  
  
  count+=10;
  $('.counter').text(count);
});

$('body').on('click', '.js-add-hundred', () => {
  
  for (var i=0; i<=99; i++) {
    appendJacob();
  } 
  
  
  count+=100;
  $('.counter').text(count);
});

scripts

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

style.scss

.jacob {
  position:relative;
  background-image:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21542/svJacob-2.svg);
  
  
  
  background-size:400%;
  background-position-x:0px;
  background-position-y:0px;
  animation: move 0.5s steps(4, end) infinite;
  
  width:64px;
  height:64px;
  margin:64px auto;
  
  &.left { background-position-x:0px; }
  &.down { background-position-x:192px; }
  &.right { background-position-x:128px; }
  &.up { background-position-x:64px; }
  
  &.absolute {
    position:absolute;
  }
}

@keyframes move {
    $width: 16 * 16px;
    to {background-position-y: $width;}
}