Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.haml

Created Jun 2, 2021
Embed
What would you like to do?
NESubscribe
#wrap
%form.signup
%input.email{:type => "email", :placeholder => "email", :maxlength => "24"}/
%input.submit{:type => "submit", :value => "Subscribe"}/
.field
.pipe
-10.times do
.fireworks
$( ".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);
});
<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>
$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;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment