Learn web development

Make animate multirole based login form

How to Create a Attractive animated Sign Up and Login Form

Create an attractive and dynamic login and signup form with slide animations and smooth transitions. This animated form features transforming login and signup sections, stylish input fields, and interactive elements using HTML, CSS, and JavaScript. The registration form includes visually appealing animations for a seamless user experience. Perfect for modern websites, this form offers responsive design, rotating backgrounds, and engaging transitions that enhance user interaction. Learn how to implement an attractive, fully functional, and animated signup and login form with CSS animations and JavaScript effects for your projects.

1. HTML Structure

a. Document Setup:

The document begins with the standard <!DOCTYPE html> declaration, specifying HTML5.
The <html> tag includes a lang attribute set to "en" for English.
Within the <head>, meta tags ensure proper character encoding (UTF-8) and responsive design through the viewport settings.
The <title> is set to "Login Form".

Code for head section:

Copy the bootstrape Cdn and link and paste it between

<head>


<!-- FontAwesome CDN -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
<!-- Boxicons CDN -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
<!-- Custom CSS -->
<link rel="stylesheet" href="style.css">

</head>

b. External Resources:

Font Awesome and Boxicons: These icon libraries are included via CDN links, enabling the use of various icons within the form.
Google Fonts: The "Poppins" font family is imported, providing a modern and clean typography.
Custom CSS and JS: Links to style.css for styling and script.js for functionality are included, though in the provided snippet, CSS and JS are embedded.

c. Body Structure:

The <body> contains a <div> with the class wrapper, serving as the main container for the form elements.
Background Elements: Two <span> elements with classes rotate-bg and rotate-bg2 are used to create dynamic background effects through CSS transformations.

Code for body :

Copy and pste the code according to my instructions.

<body>

</body>

those you are copied from the box

d. Login Form:

create a div below the

<span class="rotate-bg2"></span>

new div <div class="form-box login" style="left: 10px;">

Then copy the login form code from here and paste it after <div class="form-box login" style="left: 10px;">


<div class="form-box login">

    <form id="loginForm" action="" method="post">

        <div class="input-box">

            <input type="text" name="username" required placeholder=" ">

            <label>Username</label>

            <i class='bx bxs-user'></i>

        </div>

        <div class="input-box">

            <input type="password" name="password" required placeholder=" ">

            <label>Password</label>

            <i class='bx bxs-lock-alt'></i>

        </div>

        <button type="submit" class="btn">Login</button>

        <div class="linkTxt">

            <p>Don't have an account? <a href="#" class="register-link">Sign Up</a></p>

        </div>

    </form>

</div>

Login Form code

A <div> with classes form-box and login houses the login form.
The form includes inputs for username and password, each encapsulated within input-box divs that also contain labels and icons.
A submit button labeled "Login" is provided.
A link prompting users to "Sign Up" if they don’t have an account is included, enhancing user navigation.

e. Registration Form:

Similarly, a <div> with classes form-box and register contains the signup form. <div class="form-box register">

Code for Registration Form


<!-- Registration Form -->
<div class="form-box register">
    <form action="#" class="signup-form2">
        <div class="form-row">
            <div class="input-box animation" style="--i:18; --j:1">
                <input type="text" name="full_name" required>
                <label>Name</label>
                <i class='bx bxs-user'></i>
            </div>

            <div class="input-box animation" style="--i:19; --j:2">
                <input type="email" name="email" required>
                <label>Email</label>
                <i class='bx bxs-envelope'></i>
            </div>

            <div class="input-box animation" style="--i:19; --j:2">
                <input type="text" name="phone" required>
                <label>Phone</label>
                <i class='bx bxs-phone'></i>
            </div>

            <div class="input-box animation" style="--i:20; --j:3">
                <input type="text" name="username" required>
                <label>Username</label>
                <i class='bx bxs-lock-alt'></i>
            </div>
        </div>

        <div class="form-row">
            <div class="input-box animation" style="--i:22; --j:5">
                <input type="password" name="password" required>
                <label>Password</label>
                <i class='bx bxs-key'></i>
            </div>
        </div>

        <button type="submit" class="btn animation" style="--i:24; --j:7">Sign Up</button>
    </form>

    <!-- Info Text for Register -->
    <div class="info-text register">
        <h2 class="animation" style="--i:17; --j:0;">Apply For Admin Access</h2>
        <p class="animation" style="--i:18; --j:1; color: #1cb09a;">Wait for Admin approval after Submit form.</p>

        <div class="linkTxt animation" style="--i:25; --j:8">
            <p>Already have an account? <a href="#" class="login-link" style="color:#ebe707;">Login</a></p>
        </div>
    </div>
</div>

<!-- Script.js -->
<script src="script.js"></script>

This form collects additional information such as full name, email, and phone number, alongside username and password fields.
A submit button labeled "Sign Up" facilitates form submission.
A link is provided for users who already have an account to return to the login form.

f. Info Text Sections:

Two separate <div> elements with classes info-text and either login or register provide contextual information to the user, such as welcoming messages and instructions.
These sections are designed to complement the forms and enhance the user experience with descriptive text.

2. CSS Styling and Layout

a. Root Variables:

CSS custom properties (variables) are defined under :root for colors like white, black, and a custom light blue (--lightBulue). These variables ensure consistent color usage throughout the form.

b. Global Styles:

A universal selector (*) resets margins and paddings and sets the box-sizing to border-box for consistent element sizing.
The font-family is set globally to 'Poppins' for a uniform typography.

c. Body and Wrapper:

The body is styled to center the wrapper both horizontally and vertically, ensuring the form is always centered on the screen.
The .wrapper class defines a fixed size (750px by 450px), a white background, solid border, rounded corners, and a subtle box shadow for depth. It also employs overflow: hidden to manage content that exceeds its boundaries, crucial for the rotating background effects.

d. Form Boxes:

The .form-box class positions the forms absolutely within the wrapper, each taking up 50% of the width and 100% height.
The login form is positioned to the left, while the register form is positioned to the right.
Padding is applied to ensure adequate spacing within the forms.

e. Input Fields:

Each .input-box is relatively positioned to contain the input, label, and icon.
Inputs are styled to be transparent with no borders except for a bottom border, which changes color on focus or when valid.
Labels are absolutely positioned to overlap the inputs and transition smoothly upwards when the input is focused or filled, creating a floating label effect.
Icons are positioned inside the input fields, changing color upon interaction to provide visual feedback.

f. Buttons:

Submit buttons are styled with full width, a distinct background color (black), white text, rounded edges, and a hover effect that adds a subtle box shadow, enhancing interactivity.

g. Links and Text:

Informational text is styled for clarity and visual hierarchy.
Links within the forms are emphasized with distinct colors and hover effects to guide user actions effectively.

h. Animations:

Elements with the .animation class are set up to animate transitions, such as moving into view or fading in.
CSS variables --i and --j are used to calculate transition delays dynamically, allowing for staggered animations that enhance visual engagement.

i. Rotating Backgrounds:

The .rotate-bg and .rotate-bg2 classes create dynamic background shapes that rotate and skew, adding a modern and dynamic aesthetic to the form.
Transitions are applied to these elements to animate their transformations when toggling between login and signup forms.

j. Active States:

The .wrapper.active class toggles the visibility and positions of the form boxes and informational texts.
When active, the login form moves out of view while the registration form comes into focus, and vice versa.
Transformations and transitions are smoothly animated to ensure a seamless user experience.

Code for css

Copy the Css code (file name should be style.css)


@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root{
    --white: #fff;
    --black: #000; 
    --lightBulue: #17a;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.wrapper{
    position: relative;
    width: 750px;
    height: 450px;
    background: var(--white);
    border: 2px solid var(--black);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--black);
    overflow: hidden;
}


.wrapper .form-box{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.wrapper .form-box.login{
    left: 0;
    padding: 0 60px 0 40px;
}

.form-box h2{
    margin-bottom: 10px;
    position: relative;
    font-size: 32px;
    color: var(--black);
    text-align: center;
}


.form-box h2::after{
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--black);
}

.form-box .input-box{
    position: relative;
    width: 100%;
    height: 50px;
    margin: 25px 0;
}

.input-box input{
    width: 100%;
    height: 100%;
    background: transparent;
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    border: none;
    outline: none;
    border-bottom: 2px solid var(--black);
    transition: .5s;
    padding-right: 23px;
}

.input-box input:focus,
.input-box input:valid{
    border-bottom-color: var(--lightBulue);
}

.input-box label{
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--black);
    pointer-events: none;
    transition: 0.5s;
}


.input-box input:focus~label,
.input-box input:valid~label{
    top: -5px;
    color: var(--lightBulue);
}


.input-box i{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 18px;
    transition: 0.5s;
}

.input-box input:focus~i,
.input-box input:valid~i{
    color: var(--lightBulue);
}

form button{
    width: 100%;
    height: 45px;
    background-color: var(--black);
    color: var(--white);
    border: none;
    outline: none;
    border-radius: 40px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: .3s;
}

form button:hover{
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

form .linkTxt{
    font-size: 14px;
    color: var(--black);
    text-align: center;
    margin: 20px 0 10px;
}

.linkTxt p a{
    color: blue;
    text-decoration: none;
    font-weight: 600;
}

.wrapper .form-box.login .animation{
    transform: translateX(0);
    transition: 0.7s ease;
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--j));
}


.wrapper.active .form-box.login .animation{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition-delay: calc(.1s * var(--i));
}






.wrapper .info-text{
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.wrapper .info-text.login{
    right: 0;
    text-align: right;
    padding: 0 40px 60px 150px;

}

.wrapper .info-text h2{
    font-size: 36px;
    color: var(--white);
    line-height: 1.3;
    text-transform: uppercase;
}

.wrapper .info-text p{
    font-size: 16px;
    color: var(--white);
}


.wrapper .info-text.login .animation{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition: 0.7s ease;
    transition-delay: calc(.1s * var(--j));
}
.wrapper.active .info-text.login .animation{
    transform: translateX(120px);
    opacity: 0;
    filter: blur(10px);
    transition: 0.7s ease;
    transition-delay: calc(.1s * var(--i));
}





.wrapper .rotate-bg{
    position: absolute;
    top: -4px;
    right: 0;
    width: 850px;
    height: 600px;
    background: #000;
    transform: rotate(10deg) skewY(40deg);
    transform-origin: bottom right;
    transition: 1.5s ease;
    transition-delay: .9s;
}

.wrapper.active .rotate-bg{
    transform: rotate(0) skewY(0);
    transition-delay: 0.5s;
}











.wrapper .form-box.register{
    padding: 0 40px 0 60px;
    right: 0;
}

.wrapper.active .form-box.register{
    pointer-events: auto;
}


.wrapper .form-box.register .animation{
    transform: translateX(120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}

.wrapper.active .form-box.register .animation{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}



.wrapper .info-text.register{
    left: 0;
    text-align: left;
    padding: 0 150px 60px 40px;
    pointer-events: none;
}

.wrapper.active .info-text.register{
    pointer-events: auto;
}


.wrapper .info-text.register .animation{
    transform: translateX(-120%);
    opacity: 0;
    filter: blur(10px);
    transition: .7s ease;
    transition-delay: calc(.1s * var(--j));
}

.wrapper.active .info-text.register .animation{
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
    transition-delay: calc(.1s * var(--i));
}




.wrapper .rotate-bg2{
    position: absolute;
    top: 100%;
    left: 250px;
    width: 1050px;
    height: 700px;
    background: var(--white);
    transform: rotate(0) skewY(0);
    transform-origin: bottom left;
    transition: .9s ease;
    transition-delay: 0.5s;
}

.wrapper.active .rotate-bg2{
    transform: rotate(-11deg) skewY(-44deg);
    transition-delay: .8s;
}

3. JavaScript Functionality

a. Selecting Elements:

The script begins by selecting key elements from the DOM:

The .wrapper div, which contains all form elements.
The .register-link and .login-link anchors, which users click to switch between forms.

b. Event Listeners:

Register Link Click: When a user clicks the "Sign Up" link, the script adds the active class to the wrapper, triggering CSS transitions that shift the view to the registration form. It also calls the animateElements function to handle additional animations.
Login Link Click: Conversely, clicking the "Login" link removes the active class, reverting the view back to the login form and re-triggering animations.

c. Animation Function:

The animateElements function selects all elements with the .animation class and toggles the active class based on whether the wrapper currently has the active class.
This dynamic class toggling ensures that all animated elements respond appropriately to state changes, maintaining visual consistency and fluidity in transitions.

4. User Experience and Interaction

a. Responsive Design:

The form is designed to be centered and maintains its layout across various screen sizes due to the flexible units and responsive CSS properties.

b. Visual Feedback:

Interactive elements like input fields and buttons provide immediate visual feedback through color changes and transitions, enhancing usability.

c. Smooth Transitions:

The use of CSS transitions and JavaScript-controlled class toggling ensures that switching between login and signup forms is smooth and visually appealing, reducing user friction.

d. Accessibility Considerations:

Proper use of labels linked to inputs ensures that the form is accessible to screen readers.
High-contrast colors and clear typography improve readability.

5. Overall Implementation Strategy

a. Separation of Concerns:

The structure maintains a clear separation between HTML for content, CSS for styling, and JavaScript for behavior, adhering to best practices.

b. Reusability and Maintainability:

Using CSS variables for colors and reusable classes like .input-box and .animation promotes consistency and simplifies maintenance.

c. Progressive Enhancement:

The form is fully functional even if JavaScript is disabled, ensuring basic usability. Enhanced features like animations rely on JavaScript but don't break the core functionality.

d. Scalability:

The modular approach allows for easy addition of new features or modifications without significant overhauls to the existing codebase.

6. Potential Enhancements and Considerations

a. Form Validation:

While the HTML uses the required attribute for basic validation, implementing more robust validation in JavaScript could enhance security and user experience.

b. Responsive Adjustments:

Further media queries could ensure optimal display on mobile devices, adjusting widths and layouts as needed.

c. Accessibility Improvements:

Adding ARIA attributes and ensuring keyboard navigability would make the form more accessible to all users.

d. Backend Integration:

Connecting the forms to a backend system would enable actual user authentication and data storage, transforming the static forms into functional components.

e. Enhanced Security:

Implementing measures like HTTPS, input sanitization, and protection against common vulnerabilities (e.g., SQL injection, XSS) is crucial for a production environment.

Code for Javascript (script.js)

This Project Consists of 3 files

index.html
style.css
script.js



const wrapper = document.querySelector('.wrapper');
const registerLink = document.querySelector('.register-link');
const loginLink = document.querySelector('.login-link');

// When the register link is clicked
registerLink.addEventListener('click', () => {
    wrapper.classList.add('active');
    animateElements();
});

// When the login link is clicked
loginLink.addEventListener('click', () => {
    wrapper.classList.remove('active');
    animateElements();
});

// Function to add 'active' class to animation elements for triggering CSS transitions
function animateElements() {
    const animations = document.querySelectorAll('.animation');
    animations.forEach(element => {
        if (wrapper.classList.contains('active')) {
            element.classList.add('active');
        } else {
            element.classList.remove('active');
        }
    });
}

7. Conclusion

The provided login and signup form is a thoughtfully designed interface that balances aesthetics with functionality. Through meticulous structuring in HTML, elegant styling and animations in CSS, and dynamic interactivity via JavaScript, the form offers users an engaging and seamless experience. By adhering to best practices in web development, such as separation of concerns and responsiveness, the implementation stands as a robust foundation for further enhancements and integration into larger systems.