Head for the Hills

by Denis Tverdokhlebov

HTML

<script src="https://unpkg.com/[email protected]/dist/splitting.min.js"></script>
<div id='wrap'>
  <div class='field'></div>
  <form class='signup'>
    <input class='email' placeholder='email' type='email'>
    <div class='btnwrap'>
      <div class='spark'></div>
      <div class='spark'></div>
      <div class='spark'></div>
      <div class='spark'></div>
      <div class='spark'></div>
      <div class='spark'></div>
      <b>Subscribe</b>
      <div class='blob'></div>
      <input type='submit' value='Subscribe'>
    </div>
  </form>
</div>

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  height: 100vh;
  overflow: hidden;
  --orange: #ff7b0a;
  --pink: #fe3a7d;
  --gray: #ccc;
}
body #wrap {
  position: relative;
  display: inline-block;
  height: 70px;
  font-family: "Lato";
  width: calc(100% - 400px);
  max-width: 750px;
  min-width: 350px;
}
body #wrap:after {
  content: '';
  position: absolute;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/running.png");
  background-position: 0px 50%;
  -webkit-animation: runner 0.5s steps(32, end) infinite;
          animation: runner 0.5s steps(32, end) infinite;
  opacity: 0;
}
body #wrap.plunge {
  pointer-events: none;
}
body #wrap.plunge input[type="email"] {
  color: transparent;
}
body #wrap.plunge .btnwrap .spark {
  -webkit-animation: spark 0.3s ease-in-out 1 forwards;
          animation: spark 0.3s ease-in-out 1 forwards;
}
@-webkit-keyframes spark {
  0% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
  50% {
    -webkit-transform: rotate(135deg) scale(1);
            transform: rotate(135deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
}
@keyframes spark {
  0% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
  50% {
    -webkit-transform: rotate(135deg) scale(1);
            transform: rotate(135deg) scale(1);
  }
  100% {
    -webkit-transform: rotate(45deg) scale(0);
            transform: rotate(45deg) scale(0);
  }
}
body #wrap.plunge .btnwrap .spark:nth-of-type(1) {
  -webkit-animation-delay: 2.1s;
          animation-delay: 2.1s;
}
body #wrap.plunge .btnwrap .spark:nth-of-type(2) {
  -webkit-animation-delay: 2.2s;
          animation-delay: 2.2s;
}
body #wrap.plunge .btnwrap .spark:nth-of-type(3) {
  -webkit-animation-delay: 2.3s;
          animation-delay: 2.3s;
}
body #wrap.plunge...

JavaScript

Splitting();
$('.signup').submit(function(event){
 event.preventDefault();
 
 var emailText = $('.email').val();
 $(".field").append("<p data-splitting='chars'>" + emailText + "</p>");
  Splitting();
  $("#wrap").addClass("plunge");
  setTimeout(function(){	
    $('.email').val('');
    $( ".field p" ).remove();
    $("#wrap").removeClass("plunge");
}, 4000);
});