Animated Login & Signup Form Using HTML, CSS & JavaScript
Animated Login & Signup Form Using HTML, CSS & JavaScript
Today almost every website you visit has a login and signup page where users enter their details to access the platform. In this project we build a modern and fully animated login and signup form using HTML, CSS and JavaScript with smooth sliding transitions that make the user experience truly enjoyable. This project is perfect for beginners who want to practice CSS animations and JavaScript functionality as well as for developers who need a clean and ready to use authentication template. The form allows users to switch between login and signup sections without any page reload giving it a very sleek and professional feel.
Animated Login & Signup Form Using HTML, CSS & JavaScript:
An Animated Login & Signup Form is create using HTML, CSS, and JavaScript to build a modern authentication interface with smooth sliding transitions. The design allows users to switch between login and registration forms without reloading the page, providing a seamless and interactive user experience.
This Animated Login and Signup Form is a modern authentication interface where users can smoothly slide between the login and registration forms without reloading the page. In this project we use CSS animations and JavaScript to create an elegant sliding effect between the sign in and sign up sections. The layout is fully responsive and works perfectly across desktops, tablets and mobile devices while maintaining a clean and professional appearance. This type of form is widely used in modern web applications because it saves page load time and provides a seamless interactive user experience.
This animated login and signup form comes with several impressive features. Users can switch between the login and signup forms with a smooth sliding animation triggered by JavaScript without any page reload. CSS animations handle the elegant transition effect between both sections making the experience visually appealing. The layout is fully responsive and seamlessly adapts to all screen sizes ensuring a consistent user experience across desktops, tablets and smartphones. The form includes stylish input fields, buttons and clean typography that give it a modern and professional appearance suitable for any web application or personal project.
The project uses CSS animations and JavaScript functionality to create an elegant sliding effect between the sign-in and sign-up sections. The layout is fully responsive, ensuring that the form works perfectly across desktops, tablets, and mobile devices while maintaining a clean and professional appearance.
Steps to Create an Animated Login & Signup Form:
Follow these simple steps to build a sliding login and registration form:
-
Create a project folder, for example,
animated-login-signup-form. - Then make the necessary files inside it.
-
Create a file called
index.htmlto serve as the main file. -
create a file called
style.cssfor the custom styling. - create a file called
script.jsfor the JavaScript code.
This code includes essential HTML markup with semantic tags like <form>, <input>, <button>, <label> and <div> which are used to build the login and signup form layout.
The script.js file handles the sliding transition between login and signup sections using JavaScript methods like classList.add, classList.remove, addEventListener and querySelector.
<!doctype html>
<!-- TheProviders ----------------- youtube.com/@TheProvidersOfficial -->
<html lang="en">
<head>
<title>Login & Sign up Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container p-4">
<div class="row main mt-5">
<!-- sign up form -->
<div class="col-md-6 p-5 " id="signUp">
<h1 class="display-4 text-center ">Sign up</h1>
<form class="d-flex justify-content-center mt-4">
<div class="w-75 ">
<div class="form-group">
<label for="">Email</label>
<input type="email">
</div>
<div class="form-group my-4">
<label for="">Password</label>
<input type="password">
</div>
<button type="submit">Register</button>
<div class="d-flex justify-content-between mt-5">
<a class="links" href="#" id="loginLink">Already have an Account ?</a>
</div>
</div>
</form>
</div>
<!-- Login Form -->
<div class="col-md-6 p-5 " id="login">
<h1 class="display-4 text-center ">Login</h1>
<form class="d-flex justify-content-center mt-4">
<div class="w-75 ">
<div class="form-group">
<label for="">Email</label>
<input type="email">
</div>
<div class="form-group my-4">
<label for="">Password</label>
<input type="password">
</div>
<button type="submit">Login</button>
<div class="d-flex justify-content-between mt-5">
<a class="links" href="#" id="registerLink">Create an Account ?</a>
<a class="links" href="#" >forget Password ?</a>
</div>
</div>
</form>
</div>
<div id="overlay">
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Apply custom CSS styling to create the layout and animation effects.
body {
background-color: #4158D0;
background-image: linear-gradient(90deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
background-size: 100% 100%;
}
.main {
background-color: rgba(255, 255, 255, 0.219);
backdrop-filter: blur(2px);
border-radius: 25px;
}
input {
outline: none;
background-color: transparent;
border: none;
border-bottom: 2px solid dodgerblue;
width: 100%;
position: relative;
bottom: 0px;
}
.form-group {
height: 70px;
}
label {
position: relative;
font-size: 18px;
color: rgb(58, 58, 58);
top: 32px;
left: 5px;
transition: .3s;
z-index: -1;
}
.label-selected {
position: relative;
font-size: 13px;
color: rgb(82, 82, 82);
top: 5px;
left: 5px;
}
button {
border: none;
background-color: dodgerblue;
color: #fff;
font-weight: 500;
padding: 10px;
width: 100px;
border-radius: 30px;
margin-left: 75%;
transition: .5s;
transform: translate(0px, 0px);
}
button:hover {
box-shadow: 0px 8px 15px -10px rgb(61, 61, 61);
transform: translate(0px, -3px);
}
.links {
font-size: 14px;
color: rgb(3, 48, 197);
}
#overlay {
background-color: #fff;
height: 550px;
width: 600px;
position: absolute;
transform: translate(0px, -25px);
border-radius: 25px;
background-image: url(bg2.jpg);
transition: .5s;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
#overlay ,#signUp{
display: none;
}
button{
margin-left: 65%;
}
}
Add JavaScript functionality to switch between the login and signup sections. Save the files and open the project in a browser to test the animated form.
document.querySelectorAll('input').forEach((item) => {
item.addEventListener("focus", function () {
item.previousElementSibling.className = 'label-selected';
})
item.addEventListener("blur", function () {
console.log(item.value);
if (item.value === '') {
item.previousElementSibling.className = '';
}
})
})
document.getElementById("registerLink").addEventListener("click", function () {
if (window.innerWidth < 600) {
document.getElementById("signUp").style.display = 'block';
document.getElementById("login").style.display = 'none';
}
else {
document.getElementById("overlay").style.transform = 'translate(550px , -25px)';
}
})
document.getElementById("loginLink").addEventListener("click", function () {
if (window.innerWidth < 600) {
document.getElementById("login").style.display = 'block';
document.getElementById("signUp").style.display = 'none';
}
else {
document.getElementById("overlay").style.transform = 'translate(0px , -25px)';
}
})
