.deck
  -(1..3).each do |i|
    .card
      %header.card-header
        %h3 Card Title
      .card-body
        Card Content
      %footer.card-footer
        footer text
        
<p class="body-message">Click stack to remove a card, click anywhere else to add more cards.</p>

// The Scaterring!
// ---------------

@function random-range ($min: 0, $max: 100) {
  @return random($max - $min) + $min;
}

.is-scattered {
  $minRotation: -5; // the range of rotation allowed
  $maxRotation: 5;
  $count: 9; // the number of distinct patterns to create
  @for $i from 1 through $count { 
    $deg: random-range($minRotation, $maxRotation);
    $oX: random-range(-100, 100);
    $oY: random-range(-100, 100);
    .card:nth-of-type(#{$count}n+#{$i}) {
      transform-origin: percentage($oX / 100) percentage($oY / 100);
      transform: rotateZ(#{$deg}deg)
        translate3d(0,0,0);
    }
  }
}

.is-offscreen--r {
  // Set the translate-x value to a sufficiently lare offset
  // so the card appears from off-screen.
  transform: translate(1000px, 0px) rotateZ(30deg) !important;
}

.is-offscreen--l {
  // Set the translate-x value to a sufficiently lare offset
  // so the card appears from off-screen.
  transform: translate(-1000px, 0px) rotateZ(-20deg) !important;
}

// Basic Styles for demo
// ---------------------

body, html {
  background: #ddd;
  height: 100%;
}

body {
  width: 300px;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.deck {
  position: relative;
  width: 300px;
  height: 200px;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  box-shadow: 0 2px 8px -2px rgba(0,0,0,0.5);
  transition: all 0.5s ease-in-out;
}

.body-message {
  color: #999;
  text-align: center;
  margin-top: 5em;
  margin-left: auto;
  margin-right: auto;
}

$text-color: #333;

.card-header {
  color: $text-color;
  font-size: 1.5rem;
  line-height: 1rem;
  padding: 1rem 1rem 0 1rem;
  h3 {
    margin: 0;
  }
}

.card-body {
  padding: 1rem;
}

.card-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 1rem;
  font-size: 0.9rem;
  text-align: center;
  padding-bottom: 1rem;
  color: lighten($text-color, 50%);
}

var $deck = $('.deck');

window.setTimeout(function () {
  $deck.addClass('is-scattered');
}, 1);

var removeTopCard = function () {
  var $child = $deck.children(':last-child');
  $child.addClass('is-offscreen--l');
  window.setTimeout(function () {
    $child.remove();
  }, 500);
}

var addNewCard = function () {
  var $card = $('<div>', {
    html: '<div class="card is-offscreen--r">'
     + '<header class="card-header">'
     + ' <h3>Card Title</h3>'
     + '</header>'
     + '<div class="card-body">'
     + '  Body Content'
     + '</div>' 
     + '<footer class="card-footer">'
     + '  footer text'
     + '</footer>'
  }).children(1);
  console.log('card', $card);
  $deck.append($card);
  window.setTimeout(function () {
    $card.removeClass('is-offscreen--r');
  }, 1);
};
 
$('body').on('click', function () {
  console.log('click');
  addNewCard();
});
 
$('.deck').on('click', function (e) {
  e.preventDefault();
  e.stopPropagation();
  console.log('click');
  removeTopCard();
});