How Do I make my sliding login/register page display the correct container?

https://pointoftech.com/wp-content/uploads/2024/07/JavaScript-Symbol-1024x576.png 1024 576 point-admin point-admin https://pointoftech.com/wp-content/plugins/ultimate-member/assets/img/default_avatar.jpg July 19, 2024 July 19, 2024

July 19, 2024
point-admin
no comments

To create a sliding login/register page that displays the correct container, you can use HTML, CSS, and JavaScript to manage the transitions and visibility of the login and register forms. Here’s a basic implementation:

Html :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sliding Login/Register</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="form-container login-container">
<form id="loginForm">
<h2>Login</h2>
<input type="text" placeholder="Username" required>
<input type="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
<div class="form-container register-container">
<form id="registerForm">
<h2>Register</h2>
<input type="text" placeholder="Username" required>
<input type="email" placeholder="Email" required>
<input type="password" placeholder="Password" required>
<button type="submit">Register</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h2>Welcome Back!</h2>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="loginBtn">Login</button>
</div>
<div class="overlay-panel overlay-right">
<h2>Hello, Friend!</h2>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="registerBtn">Register</button>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

CSS :

/* Basic Reset */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Arial', sans-serif;
}

/* Container and Forms */
.container {
position: relative;
width: 100%;
max-width: 900px;
min-height: 500px;
margin: 0 auto;
overflow: hidden;
background-color: #fff;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}

.login-container {
left: 0;
width: 50%;
z-index: 2;
}

.register-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}

/* Overlay */
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}

.overlay {
background: #ff416c;
background: linear-gradient(to right, #ff4b2b, #ff416c);
color: #fff;
position: absolute;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-panel {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0 40px;
height: 100%;
text-align: center;
top: 0;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}

.overlay-left {
transform: translateX(-20%);
}

.overlay-right {
right: 0;
transform: translateX(0);
}

.ghost {
background: transparent;
border: 1px solid #fff;
padding: 10px 20px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s ease-in-out;
}

.ghost:hover {
background: #fff;
color: #ff416c;
}

JavaScript :

document.getElementById('loginBtn').addEventListener('click', function() {
document.querySelector('.overlay-container').style.transform = 'translateX(100%)';
document.querySelector('.login-container').style.opacity = '1';
document.querySelector('.login-container').style.zIndex = '2';
document.querySelector('.register-container').style.opacity = '0';
document.querySelector('.register-container').style.zIndex = '1';
});

document.getElementById('registerBtn').addEventListener('click', function() {
document.querySelector('.overlay-container').style.transform = 'translateX(0)';
document.querySelector('.register-container').style.opacity = '1';
document.querySelector('.register-container').style.zIndex = '2';
document.querySelector('.login-container').style.opacity = '0';
document.querySelector('.login-container').style.zIndex = '1';
});

HTML: Contains two form containers for login and registration, and an overlay with buttons to switch between forms.
CSS: Defines the styling and transitions for the form containers and overlay. The overlay-container and overlay move to show the correct form.
JavaScript: Adds event listeners to the buttons to toggle the visibility of the login and register forms by adjusting the transform, opacity, and z-index properties.

When the “Login” button is clicked, the overlay moves to reveal the login form. Similarly, clicking the “Register” button moves the overlay to reveal the registration form.