Skip to content

Instantly share code, notes, and snippets.

@ajmeyghani

ajmeyghani/shake-form.html

Created August 31, 2018 11:26
Show Gist options
  • Save ajmeyghani/f03218efaa217b31bdf504b337eaad92 to your computer and use it in GitHub Desktop.
Save ajmeyghani/f03218efaa217b31bdf504b337eaad92 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
shake-form.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="/anime.js"></script>
<title>Shake Form</title>
<style>
body, html {
padding: 0;
margin: 0;
height: 100%;
}
body {
font-family: 'arial', sans-serif;
transform: translate3d(0, 0, 0);
}
p, h1, h2, h3, h4 {
margin: 0;
padding: 0;
}
p {
font-size: 13px;
margin-bottom: 5px;
}
a {
color: #2104ea;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.page {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
width: 321px;
margin: 0 auto;
perspective: 600px;
backface-visibility: hidden;
}
.login-form {
width: 100%;
min-height: 290px;
box-sizing: border-box;
border-radius: 9px;
background: #fff;
display: flex;
flex-direction: column;
padding: 20px;
border: 1px solid #e8e8e8;
border-top: 6px solid #5059d8;
filter: blur(0);
}
.login-form * {
transform: translate3d(0,0,0);
}
.login-form > form {
display: flex;
flex-direction: column;
margin-top: auto;
margin-bottom: 20px;
}
.login-form input {
margin-bottom: 5px;
background: transparent;
border: 1px solid;
padding: 10px 15px;
}
.login-form input:last-of-type {
margin-bottom: 0;
}
.login-form footer {
margin-top: auto;
border-top: 1px solid #ececec;
padding-top: 20px;
}
.form-group {
margin-bottom: 20px;
display: flex;
flex-direction: column;
}
.form-group label {
color: inherit;
margin-bottom: 5px;
color: #777;
font-size: 13px;
}
.form-group input {
color: inherit;
border-radius: 3px;
color: #797979;
font-size: 13px;
border: 1px solid #e0e0e0;
}
.login-form > .form-title {
color: inherit;
margin-bottom: 20px;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.forgot-password {
margin-bottom: 15px;
}
input[type='submit'],
input[type='submit']:hover {
}
input[type='submit'] {
border: none;
background-color: #525ad0;
color: #fff;
border-radius: 20px;
font-size: 11px;
text-transform: uppercase;
}
input[type='submit']:hover {
cursor: pointer;
}
input[type='submit']:focus {
outline: 0;
}
.spinner {
width: 15px;
height: 15px;
border: 2px solid rgba(255, 255, 255, 0.2);
border-top-color: #fff;
border-radius: 50%;
position: absolute;
right: 6px;
top: 6px;
opacity: 0;
}
.submit {
width: 95%;
display: flex;
flex-direction: column;
position: relative;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="page">
<div class="login-form" id="js-login-form">
<p class="form-title">Login to your account</p>
<form action="javascript:void 0" onsubmit="send()">
<div class="form-group">
<label for="">Email</label>
<input type="text" id="js-email">
</div>
<div class="form-group">
<label for="">Password</label>
<input type="password" id="js-password">
</div>
<p class="forgot-password"><a href="">Forgot Password?</a></p>
<div class="submit">
<input type="submit" value="Login">
<div class="spinner js-spinner"></div>
</div>
</form>
<footer>
<p>Don't have an account?</p>
<p>
<a href="">Create an Account</a>
</p>
</footer>
</div>
</div>
<script>
const xMax = 16;
const shake = anime({
targets: '#js-login-form',
easing: 'easeInOutSine',
duration: 550,
translateX: [
{
value: xMax * -1,
},
{
value: xMax,
},
{
value: xMax/-2,
},
{
value: xMax/2,
},
{
value: 0,
}
],
autoplay: false,
});
const send = () => {
shake.restart();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment