Animated Email Signup Form

Developer
Matt Popovich
Size
5,083 Kb
Views
58,696
  1. Animated Email Signup Form Previews
  2. Animated Email Signup Form HTML Codes
  3. Animated Email Signup Form CSS Codes
  4. Animated Email Signup Form JS Codes

How do I make an animated email signup form?

A signup form for a political organization with a simple 180 degree flip animation on successful email entry.. What is a animated email signup form? How do you make a animated email signup form? This script and codes were developed by Matt Popovich on 02 August 2022, Tuesday.

Animated Email Signup Form Previews
IQ Test

Animated Email Signup Form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animated Email Signup Form</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='signup-1'>	<div class='signup-section'>	<h1 id='h1-thanks'>	Thanks for your support	</h1>	<h1 id='h1-join'>	Join our movement now	</h1>	<div class='single-input-wrap'>	<form id='single-input'><!-- gah these dumb spaces tho --><div class='email-wrap'><!--	--><input class='email' type='text' placeholder='Email address'/>	</div><!--	--><div class='zip-button-wrap'>	<input class='zip' type='text' placeholder='ZIP code'/><!--	--><input id='im-in' type='button' value="I'm in!" />	</div>	</form>	<div class='form-backface'>	Success!	</div>	</div>	</div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animated Email Signup Form - Script Codes CSS Codes

@import url(//fontlibrary.org/face/glacial-indifference);
@import url(//fontlibrary.org/face/comprehension);
* { margin: 0; padding: 0; box-sizing: border-box; border: none; -webkit-font-smoothing: antialiased;
}
html { height: 100%;
}
div { display: inline-block;
}
body { height: 100%; text-align: center; vertical-align: middle;
}
body .signup-1 { width: 100%; height: 450px; background-image: linear-gradient(to top right, #173673, #2454b3); position: relative; top: 50%; transform: translateY(-50%);
}
body .signup-1 .signup-section { position: relative; top: 50%; transform: translateY(-50%); min-width: 1200px; margin: 2em auto 2em; transition: transform 0.5s;
}
body .signup-1 .signup-section h1 { text-transform: uppercase; position: absolute; top: -105px; left: 50%; transform: translateX(-50%); width: 1200px; font-family: "GlacialIndifferenceBold"; color: #fff; font-size: 275%; letter-spacing: 17px; line-height: 0.1em; padding-bottom: 0.8em; border-width: 0 0 10px 0; text-shadow: 0 1px 6px 2px rgba(23, 54, 115, 0.4);
}
body .signup-1 .signup-section h1#h1-join { opacity: 1;
}
body .signup-1 .signup-section h1#h1-thanks { opacity: 0;
}
body .signup-1 .signup-section .single-input-wrap { box-shadow: 0 1px 6px 2px rgba(23, 54, 115, 0.4); border-radius: 3px; padding: 15px; background-image: linear-gradient(to top right, #2454b3, #5e89df);
}
body .signup-1 .signup-section #single-input { z-index: 5; box-shadow: 0 1px 6px 2px rgba(23, 54, 115, 0.4); backface-visibility: hidden;
}
body .signup-1 .signup-section #single-input .email-wrap { width: 50%;
}
body .signup-1 .signup-section #single-input .email-wrap input.email { font-size: 150%; width: 100%; padding: 1.5em; font-family: "ComprehensionDark"; border-radius: 2px 0 0 2px; border-width: 0 1px 0 0; border-style: solid; border-image: linear-gradient(to bottom, transparent 0%, transparent 5%, rgba(23, 54, 115, 0.3) 30%, rgba(23, 54, 115, 0.3) 70%, transparent 95%, transparent 100%) 1 100%;
}
body .signup-1 .signup-section #single-input .zip-button-wrap { width: 50%;
}
body .signup-1 .signup-section #single-input .zip-button-wrap input.zip { font-size: 150%; width: 60%; padding: 1.5em; font-family: "ComprehensionDark";
}
body .signup-1 .signup-section #single-input .zip-button-wrap input#im-in { overflow: hidden; font-family: "GlacialIndifferenceBold"; font-size: 135%; letter-spacing: 2px; color: #FFF; text-transform: uppercase; width: 40%; border-radius: 0 2px 2px 0; background-color: #ff1a1a; transition: all 0.2s;
}
body .signup-1 .signup-section #single-input .zip-button-wrap input#im-in:hover { background-color: #e60000;
}
body .signup-1 .signup-section .form-backface { font-family: "GlacialIndifferenceRegular"; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); font-size: 110%; pointer-events: none; position: absolute; margin: -57px 0 0 0; letter-spacing: 15px; opacity: 0; top: 0; left: 5px; right: 0; z-index: 5; width: 100%;
}
input { color: rgba(23, 54, 115, 0.75); display: inline-block; height: 75px; outline: none; backface-visibility: hidden;
}
input[type='text']:focus::-webkit-input-placeholder { color: transparent;
}
input[type='text']:focus:-moz-placeholder { color: transparent;
}
input[type='text']:focus::-moz-placeholder { color: transparent;
}
input[type='text']:focus:-ms-input-placeholder { color: transparent;
}
.flip-it.single-input-wrap { animation: flippin-sweet 2.5s ease-out;
}
.flip-it#single-input { animation: peek-a-boo 2.5s ease-out;
}
.flip-it.form-backface { animation: backface-hello 2.5s ease-out;
}
.flip-it#h1-join { animation: h1-join 2.5s ease-out;
}
.flip-it#h1-thanks { animation: h1-thanks 2.5s ease-out;
}
.flip-it#spinny-thumb { animation: spinny-thumb 2.5s ease-out;
}
@keyframes flippin-sweet { 0% { transform: scale(1) rotateX(0deg) perspective(600px); pointer-events: none; } 20% { transform: translateY(-2px) scale(0.9875) rotateX(195deg); pointer-events: none; } 25% { transform: translateY(-2px) scale(0.9875) rotateX(180deg); pointer-events: none; } 50% { transform: translateY(-2px) scale(0.986) rotateX(180deg) perspective(100px); pointer-events: none; } 75% { transform: translateY(-2px) scale(0.988) rotateX(180deg); pointer-events: none; } 80% { transform: translateY(-2px) scale(0.988) rotateX(195deg); pointer-events: none; } 100% { transform: scale(1) rotateX(0deg) perspective(600px); pointer-events: none; }
}
@keyframes peek-a-boo { 0% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes backface-hello { 0% { opacity: 0; transform: rotateX(180deg) translateY(-100px); } 19% { opacity: 0; transform: rotateX(180deg) translateY(-100px) scale(1.15); } 23% { opacity: 1; transform: rotateX(180deg) translateY(-100px) scale(0.9); } 27% { opacity: 1; transform: rotateX(180deg) translateY(-100px) scale(1.05); } 35% { opacity: 1; transform: rotateX(180deg) translateY(-100px) scale(1); } 77% { opacity: 1; transform: rotateX(180deg) translateY(-100px); } 87% { opacity: 0; transform: rotateX(180deg) translateY(-100px); } 100% { opacity: 0; transform: rotateX(180deg) translateY(-100px); }
}
@keyframes h1-join { 0% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes h1-thanks { 10% { opacity: 0; } 22% { opacity: 1; } 78% { opacity: 1; } 90% { opacity: 0; }
}

Animated Email Signup Form - Script Codes JS Codes

$(document).ready(function(){	$('#im-in').click(function(){	console.log('testststts');	$('.single-input-wrap').toggleClass('flip-it');	$('#single-input').toggleClass('flip-it');	$('.form-backface').toggleClass('flip-it');	$('#h1-join').toggleClass('flip-it');	$('#h1-thanks').toggleClass('flip-it');	$('#spinny-thumb').toggleClass('flip-it');	});
});
Animated Email Signup Form - Script Codes
Animated Email Signup Form - Script Codes
Home Page Home
Developer Matt Popovich
Username mpopv
Uploaded August 02, 2022
Rating 3
Size 5,083 Kb
Views 58,696
Do you need developer help for Animated Email Signup Form?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Matt Popovich (mpopv) Script Codes
Name
FOLLOW UR DREAMS
Hyperspace
CSS Falling Shelf Menu
Polygon-style gradient pull quote
Profile CSS
Bent Hose
Visual GIPHY Search
A Pen by Matt Popovich
Text-rendering comparison
Magazine article
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!