Sliding login form

Developer
Konstantin Minevich
Size
2,652 Kb
Views
52,624
  1. Sliding login form Previews
  2. Sliding login form HTML Codes
  3. Sliding login form CSS Codes
  4. Sliding login form JS Codes

How do I make an sliding login form?

V1.2 - more fluid transitions. Instead of using css animations I am using jQuery to animate the form.. What is a sliding login form? How do you make a sliding login form? This script and codes were developed by Konstantin Minevich on 07 July 2022, Thursday.

Sliding login form Previews
IQ Test

Sliding login form - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sliding login form</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loginform-open"> <a href=""><i class="fa fa-list-alt fa-lg"></i> Login Form</a>
</div>
<form class="login-form"> <a href="" class="form-close bounce"><i class="fa fa-times fa-lg"></i></a> <label for="name">Name:</label> <input type="text" id="name"/> <label for="password">Password:</label> <input type="password" id="password"/> <button type="submit">Login</button>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sliding login form - Script Codes CSS Codes

*{ font-family: "Helvetica Neue", sans-serif;
}
.loginform-open{ z-index: 10000; position: absolute; top: 0px; left: 0px; width: 100%; background-color: #333; border-bottom: 5px solid #222; padding: 10px 0; text-align: center; color: #AC9BC4;
}
.loginform-open a{ color: #fff; text-decoration: none;
}
body{ background-color: #e1e1f2; padding-top: 35px;
}
.login-form{ max-width: 320px; position: absolute; left:0; right:0; top: -100%; margin-left: auto; margin-right: auto; padding: 35px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.1), 0 3px 0 rgba(0,0,0,.1); border-radius: 4px; color: #333; font-weight: bold; font-size: 1.125em; position: relative;
}
.form-close{ position: absolute; top: 5px; right: 5px; color: #222;
}
input[type=text],
input[type=password],
label,
button{ display: block; width: 100%;
}
input{ margin: 5% 0; box-sizing: border-box;
}
input{ padding: 10px 15px; border: 1px solid transparent; background-color: #f0f0f0; outline: 0; transition: background .15s ease-in, border .25s ease-in; border-radius: 5px; font-size: 1em;
}
input:focus{ background-color: #f9f9f9; border: 1px solid #ddd; transition: background 1s ease;
}
button{ margin: 20px 0 0; padding: 10px 5px; outline: 0; border: none; border-bottom: 5px solid #AC9BC4; background-color: rgba(192,173,219,.8); transition: background .2s ease-in; font-size: 1.1em; color: #fff; border-radius: 5px;
}
/*button:hover{ background-color: rgba(192,173,219,1);
}
.bounce:hover{ animation: bounce .5s ease-in-out; -webkit-animation: bounce .5s ease-in-out;
}
@keyframes bounce{ 0%{transform: translateY(0);} 50%{transform: translateY(5px);} 100%{transform: translateY(0);}
}
@-webkit-keyframes bounce{ 0%{transform: translateY(0);} 50%{transform: translateY(5px);} 100%{transform: translateY(0);}
}
*/

Sliding login form - Script Codes JS Codes

$('.login-form').hide();
$('.loginform-open a').click(function(e){ e.preventDefault(); $('.login-form').show().animate({'top':'65px'},300);
});
$('.form-close').click(function(e){ e.preventDefault(); $('.login-form').animate({'top':'-100%'},300).hide();
});
Sliding login form - Script Codes
Sliding login form - Script Codes
Home Page Home
Developer Konstantin Minevich
Username humbl3man
Uploaded July 07, 2022
Rating 3
Size 2,652 Kb
Views 52,624
Do you need developer help for Sliding login 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!

Konstantin Minevich (humbl3man) Script Codes
Name
Stacked paper effect
Follow along links
Sticky nav example page
A Pen by Konstantin Minevich
Simple flexbox site
Bootstrap_template
Todo in react
Clean landing page.
Fullscreen menu
Sketchbook with canvas
Create amazing blog posts 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!