Introduction
This project is a modern, animated login interface featuring a video background with a smooth fade-in overlay. It combines elegant glassmorphism effects, animation, and responsive design principles to deliver an immersive user experience. The form appears in an overlay when the “Login” button is clicked, creating a dynamic and focused login experience.
Main Features
1. Video Background
- Uses a high-quality looping video as the background.
- Creates a visually appealing and modern atmosphere.
- The video runs automatically and remains behind the overlay content.
2. Animated Fade-In Overlay
- The overlay fades in smoothly when triggered.
- Uses semi-transparent dark background with a blur effect (
backdrop-filter: blur(10px)). - Enhances focus on the login form while still showing the background video.
3. Glassmorphic Login Container
- Transparent, frosted-glass look with rounded corners.
- Stylish border and subtle drop shadow for depth.
- Fully responsive and centered on any screen size.
4. Floating Labels
- Labels rise and shrink smoothly when input fields are active.
- Ensures clarity and a clean, minimal look.
- Improves accessibility and modern visual design.
5. Button Effects
- Buttons include hover animations and shadow transitions.
- Rounded and consistent with the rest of the UI theme.
6. Error Message System
- Displays error messages for missing credentials.
- Styled clearly in red to stand out against the transparent background.
7. Interactive Controls
- Overlay can be closed using the “×” button or after successful login.
- Supports pressing the Enter key to trigger login.
- Simulated authentication system (can later be replaced with actual validation).
8. Responsive Design
- Adjusts seamlessly to various devices and screen sizes.
- Maintains readability and aesthetics on mobile or desktop.
Technical Summary
- Languages Used: HTML, CSS, JavaScript
- Design Techniques: Glassmorphism, video layering, transitions, and responsive layout
- Animation: CSS transitions for fade and transform effects
- Functionality: Overlay management, form validation, and keyboard accessibility
Conclusion
This Animated Fade-In Overlay Login Form with Video Background provides a visually rich and interactive login experience ideal for modern web applications. It balances performance, accessibility, and aesthetics, making it suitable for portfolio sites, dashboards, or high-end websites.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Animated Fade-In Overlay Login Form with Video Background</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; } video { position: fixed; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .login-button { padding: 12px 24px; background: #40c4ff; border: none; border-radius: 25px; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(64, 196, 255, 0.3); } .login-button:hover { background: #0288d1; box-shadow: 0 6px 20px rgba(64, 196, 255, 0.5); } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(10px); display: flex; justify-content: center; align-items: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } .overlay.active { opacity: 1; visibility: visible; } .login-container { background: rgba(255, 255, 255, 0.15); padding: 40px; border-radius: 15px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); width: 100%; max-width: 400px; text-align: center; transform: translateY(20px); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease; } .overlay.active .login-container { transform: translateY(0); opacity: 1; } .login-container h2 { color: #fff; margin-bottom: 30px; font-size: 24px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .input-group { position: relative; margin-bottom: 30px; } .input-group input { width: 100%; padding: 12px 15px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 5px; color: #fff; font-size: 16px; outline: none; transition: all 0.3s ease; } .input-group input:focus { border-color: #40c4ff; box-shadow: 0 0 10px rgba(64, 196, 255, 0.5); background: rgba(255, 255, 255, 0.2); } .input-group label { position: absolute; top: 50%; left: 15px; transform: translateY(-50%); color: rgba(255, 255, 255, 0.8); pointer-events: none; transition: all 0.3s ease; } .input-group input:focus + label, .input-group input:not(:placeholder-shown) + label { top: -10px; font-size: 12px; color: #40c4ff; background: transparent; } button { width: 100%; padding: 12px; background: #40c4ff; border: none; border-radius: 25px; color: #fff; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(64, 196, 255, 0.3); } button:hover { background: #0288d1; box-shadow: 0 6px 20px rgba(64, 196, 255, 0.5); } .error-message { color: #ff5252; margin-top: 10px; display: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .close-button { position: absolute; top: 20px; right: 20px; background: none; border: none; color: #fff; font-size: 24px; cursor: pointer; transition: color 0.3s ease; } .close-button:hover { color: #40c4ff; } </style> </head> <body> <video autoplay muted loop playsinline> <source src="https://assets.mixkit.co/videos/preview/mixkit-aerial-view-of-a-coastline-at-sunset-4135-large.mp4" type="video/mp4"> Your browser does not support the video tag. </video> <button class="login-button" onclick="showLoginForm()">Login</button> <div class="overlay" id="overlay"> <button class="close-button" onclick="hideLoginForm()">×</button> <div class="login-container"> <h2>Login</h2> <div class="input-group"> <input type="text" id="username" placeholder=" " required> <label for="username">Username</label> </div> <div class="input-group"> <input type="password" id="password" placeholder=" " required> <label for="password">Password</label> </div> <button onclick="handleLogin()">Login</button> <div class="error-message" id="error-message">Invalid username or password</div> </div> </div> <script> function showLoginForm() { document.getElementById('overlay').classList.add('active'); } function hideLoginForm() { document.getElementById('overlay').classList.remove('active'); } function handleLogin() { const username = document.getElementById('username').value; const password = document.getElementById('password').value; const errorMessage = document.getElementById('error-message'); if (username === '' || password === '') { errorMessage.style.display = 'block'; } else { errorMessage.style.display = 'none'; // Simulate login (replace with actual authentication logic) alert('Login successful! Username: ' + username); hideLoginForm(); } } // Allow login with Enter key document.addEventListener('keydown', (event) => { if (event.key === 'Enter' && document.getElementById('overlay').classList.contains('active')) { handleLogin(); } }); </script> </body> </html>