Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/index.haml

Created November 7, 2019 23:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CodeMyUI/cd21b667fac4c77769a65ff275f504c5 to your computer and use it in GitHub Desktop.
Save CodeMyUI/cd21b667fac4c77769a65ff275f504c5 to your computer and use it in GitHub Desktop.
Download ZIP
Not the Bees!
Raw
index.haml
#wrap
.field
%form.signup
%input.email{:type => "email", :placeholder => "email", :maxlength => "25"}/
.btnwrap
-6.times do
.spark
.btn
.inner
-12.times do
.hive
%input{:type => "submit", :value => "Subscribe"}/
Raw
not-the-bees.markdown
Raw
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");
}, 6000);
});
Raw
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>
Raw
style.scss
body{
background:
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#fb1 0)0 0,
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
background-size: 40px 60px;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
overflow:hidden;
--orange: #B71;
--pink: #fb1;
--gray: #ccc;
#wrap{
position:relative;
display:inline-block;
height:70px;
font-family:"Lato";
width:600px;
margin-left:-40px;
&:before{
content:'';
position:fixed;
width:100vw;
height:100vh;
background:url(https://media.giphy.com/media/YZaNlktdPMiTm/giphy.gif);
background-size:cover;
background-position:center;
top:0;
left:0;
transition:1s ease-in-out;
transition-delay:1s;
opacity:0;
pointer-events:none;
}
form.signup{
transition:0.5s ease-in-out;
transition-delay:2s;
opacity:1;
}
&.plunge{
pointer-events:none;
&:before{
transition-delay:3.5s;
opacity:0.75;
}
form.signup{
transition-delay:5s;
opacity:0;
.btnwrap{
.btn{
transition-delay:1.75s;
transform:translateX(-90px);
.inner{
height:100%;
overflow:visible;
width:calc(100% + 60px);
animation:dropOut 2.5s ease-in-out 1 forwards;
transition-delay:5s, 3.5s;
background-size:100% 100%;
animation-delay:2.75s;
opacity:0;
@keyframes dropOut{
0%{
transform:rotate(0deg);
width:calc(100% + 60px);
}
10%{
transform-origin:0% 50%;
transform:rotate(-90deg) translateX(-60px) translateY(-40px);
width:100%;
}
12%{
transform-origin:0% 50%; transform:rotate(-88deg) translateX(-60px) translateY(-40px);
width:100%;
}
17%{
transform-origin:0% 50%; transform:rotate(-92deg) translateX(-60px) translateY(-40px);
width:100%;
}
20%{
transform-origin:0% 50%; transform:rotate(-88deg) translateX(-60px) translateY(-40px);
width:100%;
}
23%{
transform-origin:0% 50%; transform:rotate(-91deg) translateX(-60px) translateY(-40px);
width:100%;
}
25%{
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateY(-40px);
width:100%;
}
75%{
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateY(-40px);
width:100%;
}
100%{
transform-origin:0% 50%; transform:rotate(-90deg) translateX(-60px) translateX(-100vh);
width:100%;
}
}
&:after{
transition-delay:4s;
transform:scaleX(1);
}
&:before{
transition-delay:1.75s;
opacity:0;
}
.hive{
@for $i from 1 through 12{
&:nth-of-type(#{$i}){
transition-delay:#{($i / 20) + 3}s;
border-radius:20px;
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0px 0 0 var(--orange);
&:before{
transition-delay:inherit;
opacity:1;
border-radius:20px;
box-shadow:inset 0 1px 0 0 var(--orange), inset 0 -1px 0 0 var(--orange), inset 1px 0px 0 0 var(--orange);
}
}
&:last-of-type{
box-shadow:inset 0 0px 0 0 var(--orange), inset 0 0px 0 0 var(--orange), inset 0px 0px 0 1px var(--orange);
max-height:100%;
width:10%;
}
}
@for $i from 1 through 8{
&:nth-of-type(#{$i}){
height:150%;
}
}
@for $i from 9 through 12{
&:nth-of-type(#{$i}){
height:#{130% - ($i * 1%)};
}
}
}
}
}
}
}
input[type="email"]{
color:transparent;
transition-delay:2s;
transform:translateX(-100px) scaleX(0);
}
.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;
}
}
}
}
.field{
z-index:999;
clip-path: polygon(-100% -300%, 95% -300%, 95% 400%, -100% 400%);
p{
.word{
.char{
z-index:-1;
offset-path:path("M 0 0 Q 150 50 150 100 Q 250 150 350 0 Q 350 50 500 0 ");
&:before, &:after{
opacity:1;
}
@for $i from 1 through 10{
&:nth-of-type(#{$i}n){
animation:flyaway#{$i} 1.55s ease-in 1 forwards;
will-change:margin;
animation-delay:#{$i/15}s;
@keyframes flyaway#{$i}{
0%{
margin-top:10px;
}
25%{
margin-left:#{$i * -2.45}px;
margin-top:10px;
offset-distance:0%;
}
95%{
margin-left:#{$i * -2.45}px;
margin-top:0px;
offset-distance:100%;
opacity:1;
}
100%{
margin-left:#{$i * -2.45}px;
offset-distance:110%;
opacity:0;
}
}
}
}
&:nth-of-type(2n){
animation-duration:1.25s;
offset-path:path("M 0 0 Q 150 50 150 -100 Q 250 -150 350 0 Q 350 50 500 0 ");
}
&:nth-of-type(3n){
animation-duration:1.1s;
offset-path:path("M 0 0 Q 150 250 150 100 Q 250 -150 350 0 Q 350 50 500 0 ");
}
&:nth-of-type(4n){
animation-duration:1.05s;
offset-path:path("M 0 0 Q 150 50 150 0 Q 250 -50 250 0 Q 250 50 500 0 ");
}
&:nth-of-type(5n){
animation-duration:1.35s;
offset-path:path("M 0 0 Q 150 50 350 0 Q 250 50 250 0 Q 150 50 500 0 ");
}
&: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:#000;
font-weight:900;
&:before, &:after{
content:'';
position:absolute;
width:15px;
height:7.5px;
background:#fff;
box-shadow:0 0 0 1px #000;
border-radius:50px 50px 0 0;
left:-12.5px;
top:5px;
transform-origin:bottom right;
animation:flap 0.05s ease-in-out infinite alternate;
transition:opacity 0.25s ease-in-out;
opacity:0;
@keyframes flap{
from{
transform:rotate(-20deg);
}
to{
transform:rotate(30deg);
}
}
}
&:after{
animation-delay:0.02s;
}
&:nth-of-type(2n){
&:after, &:before{
animation-delay:-0.35s;
}
}
}
}
}
}
form{
position:relative;
height:70px;
width:100%;
display:inline-block;
z-index:9;
input[type="email"]{
max-height:70px;
height:70px;
width:calc(100% - 50px);
padding:0 0 0 50px;
border-radius:80px;
box-sizing:border-box;
border:none;
outline:none;
font-size:16px;
font-family:"Lato";
font-size:20px;
font-weight:900;
background:#fff;
box-shadow:inset 0 0 0 2px var(--orange);
transition:transform 0.3s ease-in-out;
transition-delay:0.5s;
transform-origin:right;
&::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(--orange), var(--orange), var(--orange));
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:var(--orange);
top:calc(50% - 7.5px);
left:calc(50% - 1.5px);
border-radius:inherit;
}
}
.btn{
position:absolute;
color:#fff;
width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
font-family:"Lato";
letter-spacing:1px;
z-index:999;
font-size:20px;
pointer-events:none;
transition:0.5s ease-in-out;
.inner{
content:'';
position:absolute;
width:calc(100% + 60px);
height:100%;
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
background-size:100% 600%;
background-position:center;
z-index:-1;
left:-20px;
border-radius:0 80px 80px 0;
box-shadow:inset 0 0 0 2px var(--orange);
overflow:hidden;
transition:opacity 0.3s ease-in-out, background-size 0.2s ease-in-out;
transform-origin:0% 150%;
opacity:1;
&:after{
content:'';
position:absolute;
width:25px;
height:15px;
background:var(--orange);
box-shadow:inset -3px 0px 0 2px rgba(0,0,0,0.25);
z-index:5;
left:0;
top:calc(50% - 7.5px);
border-radius:0 50px 50px 0;
transition:0.2s ease-in-out;
transform-origin:left;
transform:scaleX(0);
}
&:before{
content:'Subscribe';
position:absolute;
left:50%;
top:50%;
opacity:1;
transition:0.2s ease-in-out;
transform:translateX(-50%) translateY(-50%);
}
.hive{
position:absolute;
width:15%;
left:0;
height:100%;
opacity:1;
top:50%;
transform:translateY(-50%);
transition:0.2s ease-in-out;
@for $i from 1 through 12{
&:nth-of-type(#{$i}){
left:#{($i - 1) * 6.25%};
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 0px 0 0 0 var(--orange);
border-radius:0px;
z-index:-1;
&:before{
content:'';
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
opacity:0;
transition:0.3s;
}
}
&:first-of-type{
box-shadow:inset 0 2px 0 0 var(--orange), inset 0 -2px 0 0 var(--orange), inset 2px 0 0 0 var(--orange);
}
&:last-of-type{
&:before{
content:'';
position:absolute;
width:100%;
height:calc(100% - 4px);
top:2px;
background:linear-gradient(to bottom, var(--orange) -50%, var(--pink), var(--orange) 150%);
}
}
}
}
}
}
}
input[type="submit"]{
height:70px;
border-radius:80px;
padding:0 30px;
border:none;
opacity:0;
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment