Head for the Hills

head-for-the-hills.markdown

Head for the Hills

A Pen by Adam Kuhn on CodePen.

License.

index.haml

#wrap
 .field
 %form.signup
  %input.email{:type => "email", :placeholder => "email"}/
  .btnwrap
   -6.times do
    .spark
   %b Subscribe
   .blob
   %input{:type => "submit", :value => "Subscribe"}/

script.js

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);
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/splitting@1.0.5/dist/splitting.min.js"></script>

style.scss

body{
  display:flex;
  justify-content:center;
  align-items:center;
  background:#111;
  height:100vh;
  overflow:hidden;
  --orange: #ff7b0a;
  --pink: #fe3a7d;
  --gray: #ccc;
  #wrap{
    position:relative;
    display:inline-block;
    height:70px;
    font-family:"Lato";
    width:calc(100% - 400px);
    max-width:750px;
    min-width:350px;
    &:after{
      content:'';
      position:absolute;
      background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/running.png");
      background-position:0px 50%;
      animation:runner 0.5s steps(32, end) infinite;
      opacity:0;
    }
    
    &.plunge{
      pointer-events:none;
      input[type="email"]{
        color:transparent;
      }
      .btnwrap{
        .spark{
          animation:spark 0.3s ease-in-out 1 forwards;
          @keyframes spark{
            0%{
              transform:rotate(45deg) scale(0);
            }
            50%{
              transform:rotate(135deg) scale(1);
            }
            100%{
              transform:rotate(45deg) scale(0);
            }
          }
          @for $i from 1 through 6{
            &:nth-of-type(#{$i}){
              animation-delay:#{($i / 10) + 2}s;
            }
          }
        }
        .blob{
          left:20px;
          animation:puff 0.5s ease-in-out 1 forwards;
          animation-delay:1.65s;
          transform-origin:right;
          @keyframes puff{
            0%{
              left:20px;
              transform:scale(1);
            }
            50%{
              left:calc(100% - 50px);
              transform:scale(1.15);
            }
            100%{
              left:calc(100% - 50px);
              transform:scale(0);
            }
          }
        }
        b{
          &:after{
            
            animation:openclose 2.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1 forwards;
            @keyframes openclose{
              0%{
                transform:rotate(0deg);
              }
              10%{
                transform:rotate(120deg);
              }
              75%{
                transform:rotate(120deg);
                animation-timing-function:ease-in;
              }
              80%{
                animation-timing-function:ease-in;
                transform:rotate(0deg);
              }
              100%{
                animation-timing-function:ease-in;
                transform:rotate(0deg);
              }
            }
          }
        }
      }
      .field{
        overflow:hidden;
        z-index:999;
        p{
          .word{
            .char{
              z-index:2;
              animation:run 2s ease-in 1 forwards;
              animation-delay:0.25s;
              will-change:transform;
              @keyframes run{
                to{
                  transform:translateX(2000px);
                }
              }
              &:nth-of-type(2n){
                animation-duration:2.25s;
              }
              &:nth-of-type(3n){
                animation-duration:2.5s;
              }
              &:nth-of-type(4n){
                animation-duration:2.15s;
              }
              &:nth-of-type(5n){
                animation-duration:1.9s;
              }

              &:after{
                transition:0.2s ease-in-out;
                transform:scale(0.75);
                z-index:-1;
              }
            }
          }
        }
      }
    }
    .field{
      position:absolute;
      height:70px;
      width:calc(100% - 180px);
      top:0px;
      left:50px;
      z-index:9;
      pointer-events:none;
      font-size:20px;
      font-family:"Lato";
      line-height:1.5;
      p{
        font-family:"Lato";
        position:relative;
        display:inline-block;
        .word{
          .char{
            display:inline-block;
            z-index:2;
            position:relative;
            font-family:"Lato";
            color:transparent;
            font-weight:900;
            &:nth-of-type(2n){
              &:after, &:before{
                animation-delay:-0.35s;
              }
            }
            &:nth-of-type(2n){
              &:after, &:before{
                animation-delay:-0.15s;
              }
            }
            &:nth-of-type(3n){
              &:after, &:before{
                animation-delay:-0.5s;
              }
            }
            &:nth-of-type(4n){
              animation-duration:1.75s;
              &:after, &:before{
                animation-delay:-0.2s;
              }
            }
            &:nth-of-type(1){
              animation-duration:1.5s;
              &:after, &:before{
                animation-delay:-0.15s;
              }
            }
            &:before{
              content:attr(data-char);
              color:#000;
              display:inline-block;
              font-weight:900;
              position:absolute;
              z-index:2;
              animation:bounce 0.25s ease-in-out infinite alternate;
              transform-origin:bottom;
              @keyframes bounce{
                from{
                  transform:rotate(-13deg) skewX(-10deg);
                }
                to{
                  transform:rotate(5deg) skewX(-15deg);
                }
              }
            }
            &:after{
              content:'';
              position:absolute;
              z-index:-1;
              width:40px;
              height:40px;
              bottom:-13px;
              left:calc(50% - 20px);
              transform-origin:top;
              width:40px;
              height:26px;
              background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/running.png");
              background-position:0px 50%;
              animation:runner 0.75s steps(32, end) infinite;
              transform:scale(0);
              transition:0.5s ease-in-out;
            
              @keyframes runner{
                from{
                  background-position:0px 50%;
                }
                to{
                  background-position:-1280px 50%;
                }
              }
            }
          }
        }
      }
      
    }
    form{
      position:relative;
      height:70px;
      width:100%;
      display:inline-block;
      z-index:2;
      input[type="email"]{
        max-height:70px;
        height:70px;
        width:calc(100% - 50px);
        padding:0 0 0 50px;
        border-radius:80px 0 0 80px;
        box-sizing:border-box;
        border:none;
        outline:none;
        font-size:16px;
        font-family:"Lato";
        font-size:20px;
        font-weight:900;
        &::placeholder{
          color:#ccc;
          font-weight:100;
        }
      }
      .btnwrap{
        display:inline-block;
        width:auto;
        height:auto;
        position:absolute;
        right:0;
        top:0;
        .spark{
          position:absolute;
          width:15px;
          height:3px;
          background:linear-gradient(to right, var(--pink), var(--orange), var(--pink));
          top:-25px;
          border-radius:100px;
          right:10px;
          transform:rotate(45deg) scale(0);
          &:nth-of-type(4){
            right:-50px;
            top:0;
          }
          &:nth-of-type(3){
            right:-50px;
            top:30px;
          }
          &:nth-of-type(2){
            right:-10px;
            top:105px;
          }
          &:nth-of-type(5){
            right:20px;
            top:120px;
          }
          &:nth-of-type(6){
            right:-20px;
            top:-15px;
          }
          &:before{
            content:'';
            position:absolute;
            width:3px;
            height:15px;
            background:linear-gradient(to bottom, var(--pink), var(--orange), var(--pink));
            top:calc(50% - 7.5px);
            left:calc(50% - 1.5px);
            border-radius:inherit;
          }
        }
        .blob{
          position:absolute;
          height:70px;
          width:70px;
          background:linear-gradient(to bottom, var(--orange), var(--orange) 30%, var(--pink) 70%);
          z-index:-1;
          border-radius:100%;
          left:20px;
          transform:scale(1);
        }
        b{
          position:absolute;
          color:#fff;
          width:100%;
          height:100%;
          display:flex;
          justify-content:center;
          align-items:center;
          font-family:"Lato";
          letter-spacing:1px;
          z-index:2;
          font-size:20px;
          pointer-events:none;
          &:before{
            content:'';
            position:absolute;
            width:calc(100% + 20px);
            height:100%;
            background:linear-gradient(to bottom, var(--orange), var(--pink));
            z-index:-1;
            left:0;
            border-radius:0 80px 80px 0;
          }
          &:after{
            content:'';
            position:absolute;
            width:20px;
            height:100%;
            left:-20px;
            background:linear-gradient(to bottom, var(--orange), var(--pink));
            border-radius:0px 0 0 0px;
            transform-origin:100% 0%;
            transition:0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transition-delay:1s;
            top:0;
          }
        }
      }
      input[type="submit"]{
        height:70px;
        border-radius:80px;
        padding:0 30px;
        border:none;
        opacity:0;
        
      }
    }
    
  }
  
}