? Introduction to Animated Eyes Login Page
Creating an engaging and interactive login page can enhance the user experience, making your website stand out. This tutorial will guide you in developing a modern login form with a realistic animated eyes effect. The pupils follow the cursor, giving the page an interactive and fun feel.
This login page is fully responsive and works seamlessly across all devices, ensuring a smooth and professional user experience.
? Features of This Animated Login Page
✅ Eye Movement Animation: The eyes dynamically follow the user's cursor, making the login page feel interactive and alive.
✅ Fully Responsive Design: Works perfectly on desktop, tablets, and mobile devices without breaking the layout.
✅ Clean & Modern UI: A well-designed login form with forgot password & sign-up options.
✅ Smooth Animations: Utilizes CSS keyframes and JavaScript DOM manipulation for smooth effects.
✅ Lightweight & Fast Loading: Optimized code that does not slow down page speed.
✅ Easy to Customize: Modify the colors, sizes, fonts, and animations to fit your branding or website theme.
? How the Animation Works
This project is built using:
✅ HTML – Provides the structure for the eyes and login form.
✅ CSS – Styles the eyes, form, and overall layout, ensuring responsiveness.
✅ JavaScript – Adds the interactive eye-tracking effect by dynamically adjusting the pupils based on mouse position.
? Step-by-Step Breakdown
1️⃣ HTML Structure
- Two eye containers are created with pupils inside them.
- A login form is positioned in the center of the page.
2️⃣ CSS Styling
- The page background is set to aesthetic colors for a modern look.
- The eyes and pupils are styled to look realistic.
- The login form is centered on all devices with a sleek and professional design.
3️⃣ JavaScript Functionality
- Detects the mouse movement and dynamically moves the pupils.
- Uses event listeners to adjust eye positions smoothly.
?️ How to Use This Animated Login Form?
? Step 1: Copy & Paste the Code
Simply copy the provided source code and integrate it into your HTML file.
? Step 2: Customize the Styling
Modify the CSS to match your brand colors, fonts, and animations.
? Step 3: Implement in Your Website
Use this animated login form in membership sites, portfolios, blogs, and creative projects.
?Benefits of Using an Animated Login Page
? Improves User Engagement: Interactive UI elements reduce bounce rates, helping SEO.
? Enhances Website Design: A visually appealing login form increases user retention.
? Fast Page Speed: Optimized code ensures that animations don’t slow down page performance.
? Mobile-Friendly: The responsive design ensures a smooth experience on all devices.
? Final Thoughts – Why Use This Animated Login Form?
? Engages users with a fun & interactive design.
? Improves UI/UX with smooth animations.
? Enhances brand identity with a unique login page.
? Easy to integrate into any website.
? SEO-friendly & optimized for fast indexing on Google.
? Copy the complete source code and implement this creative login page today! ?
HTML Code
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Glowing Animated Login Form</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="eye">
<div class="pupil"></div>
</div>
<div class="eye">
<div class="pupil"></div>
</div>
</div>
<div class="box">
<div class="login">
<div class="loginBx">
<h2>
<i class="fa-solid fa-right-to-bracket"></i>
Login
<i class="fa-solid fa-heart"></i>
</h2>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<input type="submit" value="Sign in" />
<div class="group">
<a href="#">Forgot Password</a>
<a href="#">Sign up</a>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to bottom, #87CEFA, #1E90FF);
}
.container {
display: flex;
gap: 40px;
}
.container {
display: flex;
gap: 40px;
margin-bottom: 50px;
}
.eye {
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.eye {
width: 80px;
height: 80px;
background: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
.pupil {
width: 30px;
height: 30px;
background: black;
border-radius: 50%;
position: absolute;
transition: 0.1s linear;
}
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
.box {
position: relative;
width: 400px;
height: 200px;
background: repeating-conic-gradient(
from var(--a),
#ff2770 0%,
#ff2770 5%,
transparent 5%,
transparent 40%,
#ff2770 50%
);
filter: drop-shadow(0 15px 50px #000);
animation: rotating 4s linear infinite;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.box:hover {
width: 450px;
height: 500px;
}
@keyframes rotating {
0% {
--a: 0deg;
}
100% {
--a: 360deg;
}
}
.box::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: repeating-conic-gradient(
from var(--a),
#45f3ff 0%,
#45f3ff 5%,
transparent 5%,
transparent 40%,
#45f3ff 50%
);
filter: drop-shadow(0 15px 50px #000);
border-radius: 20px;
animation: rotating 4s linear infinite;
animation-delay: -1s;
}
.box::after {
content: "";
position: absolute;
inset: 4px;
background: #2d2d39;
border-radius: 15px;
border: 8px solid #25252b;
}
.login {
position: absolute;
inset: 60px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
flex-direction: column;
background: rgba(0, 0, 0, 0.2);
z-index: 1000;
box-shadow: inset 0 10px 20px rgba(0, 0, 0, 0.5);
border-bottom: 2px solid rgba(255, 255, 255, 0.5);
transition: 0.5s;
color: #fff;
overflow: hidden;
}
.box:hover .login {
inset: 40px;
}
.loginBx {
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
transform: translateY(126px);
gap: 20px;
width: 70%;
transition: 0.5s;
}
.box:hover .loginBx {
transform: translateY(0px);
}
.loginBx h2 {
text-transform: uppercase;
letter-spacing: 0.2em;
font-weight: 600;
}
.loginBx h2 i {
color: #ff2770;
text-shadow: 0 0 5px #ff2770, 0 0 30px #ff2770;
}
.loginBx input {
width: 100%;
padding: 10px 20px;
outline: none;
font-size: 1em;
color: #fff;
background: rgba(0, 0, 0, 0.1);
border: 2px solid #fff;
border-radius: 30px;
}
.loginBx input::placeholder {
color: #999;
}
.loginBx input[type="submit"] {
background: #45f3ff;
border: none;
font-weight: 500;
color: #111;
cursor: pointer;
transition: 0.5s;
}
.loginBx input[type="submit"]:hover {
box-shadow: 0 0 10px #45f3ff, 0 0 60px #45f3ff;
}
.group {
display: flex;
width: 100%;
justify-content: space-between;
}
.group a {
color: #fff;
text-decoration: none;
}
.group a:nth-child(2) {
color: #ff2770;
font-weight: 600;
}
JavaScript Code
document.addEventListener("mousemove", (event) => {
const eyes = document.querySelectorAll(".eye .pupil");
eyes.forEach((pupil) => {
let eye = pupil.parentElement.getBoundingClientRect();
let x = eye.left + eye.width / 2;
let y = eye.top + eye.height / 2;
let deltaX = event.clientX - x;
let deltaY = event.clientY - y;
let angle = Math.atan2(deltaY, deltaX);
let moveX = Math.cos(angle) * 20;
let moveY = Math.sin(angle) * 20;
pupil.style.transform = `translate(${moveX}px, ${moveY}px)`;
});
});
PHP Code
NO Need
? FAQs – Animated Eyes Login Page for Fast Google Ranking
1. How do I create an animated eye movement effect in JavaScript?
JavaScript listens for the mouse position and dynamically moves the pupils using CSS transformations. The full source code is provided in this post.
2. Will this animation work on mobile devices?
Yes! The login page and animation are fully responsive and work on all screens, including smartphones and tablets.
3. Can I change the speed of the animation?
Absolutely! You can adjust the animation speed and sensitivity in the JavaScript code by tweaking the movement calculations.
4. Does this animation slow down my website?
No, the script is lightweight and optimized for fast page loading.
5. Can I use this login form for real-world applications?
Yes! You can integrate this login form into your WordPress, PHP, Laravel, or React projects.
6. How can I make the login form more stylish?
You can:
✔ Change the background color.
✔ Add shadow effects.
✔ Use Google Fonts for better typography.
✔ Animate the form elements.
7. Can I replace the eyes with different animations?
Yes! You can replace the eyes with animated emojis, blinking effects, or custom illustrations for a unique look.