<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<h1 class="strip">
  Work hard<br>
  Do good<br>
  Be incredible
<h1>

$bg-color: linear-gradient(15deg, #00a9f1, #cf00f1);
$text-color: #fff;

body {
  height: 100vh;
  background: $bg-color;
  color: $text-color;
  position: relative;
  
  &:before {
    content: 'CLICK';
    font-family: 'Roboto';
    font-size: 15px;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    z-index: 10;
    right: 30px;
    top: 30px;
    
    @media (max-width: 480px) {
      top: auto;
      bottom: 20px;
      right: 20px;
    }
  }
}

h1 {
  font-family: Roboto, sans-serif;
  font-weight: 100;
  font-size: 100px;
  margin: 0;
  padding: 30px;
  text-transform: uppercase;
  
  @media (max-width: 700px) {
    padding: 20px;
    font-size: 40px;
  }

  span {
    display: inline-block;
    transition: transform .6s cubic-bezier(.65,.02,.23,1);
    transform: translate(20%, 100%);
    position: relative;
    z-index: 1;
    letter-spacing: -0.03em;
    text-shadow: 3px 4px 0 rgba(0, 0, 0, .1);
    
    &:before {
      content: '';
      position: absolute;
      z-index: 1;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform: translateY(-40%);
      transition: transform .6s cubic-bezier(.65,.02,.23,1);
    }
    
    &.row {
      overflow: hidden;
      line-height: 0.9;
      display: block;
      transform: none;
      
      &:before {
        display: none;
      }
    }
  }

  .animate {
    transform: translate(0, 0);
    
    &:before {
      transform: translateY(100%);
    }
  }
}

$('.strip').each(function(){
  var $t = $(this),
      rows = $.trim($t.html()).split('<br>');

  $t.html('');

  $.each(rows, function(i, val){
    $('<span class="row"></span>').appendTo($t);

    var letters = $.trim(val).split('');

    $.each(letters, function(j, v){
      v = (v == ' ') ? '&nbsp;' : v;
      $('<span>' + $.trim(v) + '</span>').appendTo($('.row:last', $t));
    });

  });
});

$('body').click(function(){
  for (i = 0; i < $('.strip span').length; i++) {
    (function(ind) {
      setTimeout(function(){
          $('.strip span:not(".row")').eq(ind).toggleClass('animate');
      }, ind * 15);
    })(i);
  }
}).click();