NESubscribe

index.haml

#wrap
 %form.signup
  %input.email{:type => "email", :placeholder => "email", :maxlength => "24"}/
  %input.submit{:type => "submit", :value => "Subscribe"}/
  .field
  .pipe
 
-10.times do
 .fireworks

nesubscribe.markdown

NESubscribe

A Pen by Saijo George on CodePen.

License.

script.js

$( ".email" ).keyup(function() {
  var emailText = $('.email').val();
 $(".field p").remove();
 $(".field").append("<p data-splitting='chars'>" + emailText + "</p>");
  Splitting();
});

$(function() {
    $('.email').on('keypress', function(e) {
        if (e.which == 32)
            return false;
    });
});

$('.signup').submit(function(event){
 event.preventDefault();
  $(".email").blur();
  $("#wrap").addClass("run");
  setTimeout(function(){	
    $('.email').val('');
    $( ".field p" ).remove();
    $("#wrap").removeClass("run");
}, 7000);
});

scripts

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

style.scss

$o: #ffa440;
$g: #01a500;
$b: #6a88fe;
$elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);

body{
  display:grid;
  place-items:center;
  height:100vh;
  font-family:'Press Start 2P';
  overflow:hidden;
  background:$b;
  .fireworks{
    position:absolute;
    height:16px;
    width:16px;
    transform:scale(2);
    background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/NES%20-%20Super%20Mario%20Bros%20-%20Items%20Objects%20and%20NPCs.png');
    image-rendering: pixelated;
    background-size:16px 49px;
    z-index:9;
    background-position:50% 0px;
    opacity:0;
    @keyframes fade{
      to{
        opacity:0;
      }
    }
    @keyframes boom{
      from{
        background-position:50% 0px;
        opacity:1;
      }
      to{
        background-position:50% -32px;
        opacity:1;
      }
    }
  }
  &:before{
    content:'';
    position:absolute;
    width:100%;
    height:50%;
    box-shadow:inset 0 5px 0 0 #222;
    top:calc(50% + 25px);
    background-color: #222;
background-image: linear-gradient(335deg, #e54f08 23px, transparent 23px),
linear-gradient(155deg, #e54f08 23px, transparent 23px),
linear-gradient(335deg, #e54f08 23px, transparent 23px),
linear-gradient(155deg, #e54f08 23px, transparent 23px);
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px;
  }
  #wrap{
    width:600px;
    height:60px;
    position:relative;
    .submit{
      cursor:pointer;
      &:hover{
        & ~ .pipe{
          &:after{
            letter-spacing:2px;
          }
        }
      }
    }
    .email{
      &:focus{
        & ~ .field{
          &:after{
            transform:translate(0, -50%) scale(1);
            transition-delay:0s;
          }
        }
      }
    }
    &.run{
      & ~ .fireworks{
            animation:boom 0.5s steps(2, end) 1 forwards, fade 0s ease-in-out 1 forwards;
            top:15%;
            @for $i from 1 through 10{
              &:nth-of-type(3n){
                transform:scale(3);
              }
              &:nth-of-type(4n){
                transform:scale(1);
              }
              &:nth-of-type(#{$i}){
                animation-delay:#{($i/10) + 2.5}s, #{($i/10) + 3.25}s;
                &:nth-of-type(even){
                  top:25%;
                  animation-delay:#{($i/10) + 2.75}s, #{($i/10) + 3.5}s;
                }
                left:calc(75% - #{($i * 50)}px);
              }
            }
      }
      .field{
        overflow:hidden;
        &:before{
          transition-delay:4s;
          transform:translateX(600px);
        }
      }
      .pipe{
        width:100vw;
        transition:1.5s $elastic;
        transition-delay:0.3s;
        &:after{
          transition-delay:0s, 0s;
          transform:scaleY(0);
        }
        &:before{
          top:-12.5%;
          height:125%;
        }
      }
      div{
        p{
          .word{
            span{
              animation:grow2 0.5s ease-in-out 1 forwards, run2 1.5s ease-in 1 forwards;
              @keyframes grow2{
                to{
                  transform:translateX(0px) translateY(-4px);
                }
              }
              @keyframes run2{
                from{
                  transform:translateX(0px) translateY(-4px);
                }
                to{
                  transform:translateX(500px) translateY(-4px);
                }
              }
              &:before{
                animation:grow 0.5s ease-in-out 1 forwards, run 0.35s steps(3, start) infinite;
                animation-delay:0s, 0.5s;
              }
              @for $i from 1 through 40{
                &:nth-of-type(#{(40 - $i)}){
                  animation-delay:#{$i/30}s, #{($i/30) + 0.5}s;
                  &:before{
                    animation-delay:#{$i/30}s, #{($i/30) + 0.5}s;
                  }
                }
              }
            }
          }
        }
      }
    }
    input{
      opacity:0;
      z-index:9;
    }
    input, div{
      position:absolute;
      height:100%;
      box-sizing:border-box;
      width:25%;
      left:75%;
      top:0;
      &.pipe{
        background:linear-gradient(to bottom, $g 75%, lighten($g, 40%) 75%, lighten($g, 40%) 85%, $g 85%);
        box-shadow:inset 0 0 0 5px #222;
        transition:0.75s $elastic;
        &:after{
          content:'SUBMIT';
          position:absolute;
          height:100%;
          width:100%;
          display:flex;
          justify-content:center;
          align-items:center;
          color:#fff;
          transition:transform 0.25s $elastic, letter-spacing 0.25s $elastic;
          transition-delay:1s, 0s;
        }
        &:before{
          content:'';
          position:absolute;
          width:25px;
          top:50%;
          background:inherit;
          box-shadow:inherit;
          left:-20px;
          height:0px;
          transition:0.3s $elastic;
        }
      }
      &.field{
        display:flex;
        align-items:center;
        justify-content:flex-start;
        transition:0.75s ease-in-out;
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        p{
          background:#fff;
          box-shadow:inset 0 5px 0 0 #222, inset 0 -5px 0 0 #222, inset 5px 0 0 0 #222;
          position:relative;
          z-index:10;
        }
        &:after{
          content:'';
          height:30px;
          width:4px;
          background:#222;
          margin-left:20px;
          position:absolute;
          left:0;
          top:50%;
          transform:translate(0, -50%) scale(0);
          z-index:9;
          animation:flash 0.5s linear infinite alternate;
          transition:0s ease-in-out;
          transition-delay:3s;
          @keyframes flash{
            0%{
              opacity:0;
            }
            50%{
              opacity:0;
            }
            50.01%{
              opacity:1;
            }
            100%{
              opacity:1;
            }
          }
        }
        &:before{
          content:'';
          transition:0.75s ease-in-out;
          position:absolute;
          width:calc(100% + 5px);
          height:100%;
          box-shadow:inset 0 0 0 5px #222;
          left:0;
          top:0;
          background:#fff;
        }
        p, .word{
          position:absolute;
          box-sizing:border-box;
          width:100%;
          height:100%;
          top:0;
          left:0;
          display:flex;
          justify-content:flex-start;
          align-items:center;
          margin:0;
        }
        .word{
          padding-left:15px;
        }
        span.char{
          font-size:18px;
          width:18px;
          height:18px;
          display:flex;
          justify-content:center;
          align-items:center;
          position:relative;
          color:#222;
          transform:translateX(0px) translateY(5px);
          &:before{
            content:'';
            position:absolute;
            left:calc(50% - 1.25px);
            top:calc(50% + 25px);
            width:48px;
            height:60px;
            background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/383755/mariohead.png');
            image-rendering: pixelated;
            background-size:192px 96px;
            background-position:-48px 100%;
            transform:translate(-50%, -50%) scale(0.85);
            clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

            @keyframes run{
              from{
                background-position:-96px 100%;
              }
              to{
                background-position:48px 100%;
              }
            }
            @keyframes grow{
              to{
                clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
              }
            }
          }
        }
      }
      &.email, &.field{
        width:75%;
        left:0;
      }
    }
  }
}