Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

50Projects-HTML-CSS-JavaScript: Form wave Animation #8

Merged
merged 7 commits into from
Jan 16, 2024
Merged

50Projects-HTML-CSS-JavaScript: Form wave Animation #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
ebb4a69
create elements for form
tajulafreen Jan 16, 2024
93b5e34
add basic styles
tajulafreen Jan 16, 2024
2a39aa5
add functionalities
tajulafreen Jan 16, 2024
af7a124
add gradient background
tajulafreen Jan 16, 2024
c783c4c
add glow effects
tajulafreen Jan 16, 2024
fb3a312
add active effect
tajulafreen Jan 16, 2024
68e3e8a
solve linter issue
tajulafreen Jan 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions Source-Code/FormWaveAnimation/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Wave Animation</title>
<link rel="stylesheet" href="style.css">
<link>
</head>
<body>
<div class="container">
<h1>Pleas Login</h1>
<form>
<li class="form-control">
<input type="text" required>
<label>Email</label>
</li>
<li class="form-control">
<input type="password" required>
<label>Password</label>
</li>
<li><button class="btn">Login</button></li>
</form>
<p>Don't have an account? <a href="#" class="link">Sign up</a></p>
</div>

<script src="script.js"></script>
</body>
</html>
10 changes: 10 additions & 0 deletions Source-Code/FormWaveAnimation/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
const labels = document.querySelectorAll('.form-control label');

labels.forEach((label) => {
label.innerHTML = label.innerText
.split('')
.map(
(letter, idx) => `<span style="transition-delay:${idx * 50}ms" >${letter}</span>`,
)
.join('');
});
146 changes: 146 additions & 0 deletions Source-Code/FormWaveAnimation/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,146 @@

* {
box-sizing: border-box;
}

body {
background-color: #212121;
font-family: "Segoe UI", sans-serif;
margin: 0;
overflow: hidden;
height: 100vh;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
}

h1 {
color: aliceblue;
text-align: center;
}

label,
p {
color: aliceblue;
}

.btn {
position: relative;
background: linear-gradient(to bottom, #e81cff8d, #40c9ff69);
padding: 15px;
width: 80%;
color: #fff;
border: 1px #fff;
border-radius: 7px;
font-family: "Segoe UI", sans-serif;
font-weight: bold;
font-size: 18px;
animation: button-shimmer 2s infinite;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

@keyframes button-shimmer {
0% {
background-position: left top;
}

100% {
background-position: right bottom;
}
}

@keyframes button-particles {
0% {
background-position: left top;
}

100% {
background-position: right bottom;
}
}

.btn:hover {
background: linear-gradient(to bottom, #e81cff, #40c9ff);
animation: button-particles 1s ease-in-out infinite;
transform: translateY(-2px);
}

.btn:active {
transform: scale(0.95);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

a {
text-decoration: none;
color: #fff;
}

.container {
background:
linear-gradient(#000, #000) padding-box,
linear-gradient(145deg, transparent 35%, #e81cff, #40c9ff) border-box;
padding: 20px 40px;
border-radius: 3%;
display: flex;
flex-direction: column;
background-size: 200% 100%;
animation: gradient 5s ease infinite;
border: 2px solid transparent;
}

@keyframes gradient {
0% {
background-position: 0% 50%;
}

50% {
background-position: 100% 50%;
}

100% {
background-position: 0% 50%;
}
}

.form-control {
position: relative;
margin: 20px;
width: 80%;
}

.form-control input {
background-color: transparent;
border: 0;
border-bottom: 2px #ffffffd4 solid;
display: block;
width: 100%;
font-size: 18px;
color: #fff;
}

.form-control input:focus,
.form-control input:valid {
outline: 0;
border-bottom-color: #ffffffd4;
}

.form-control label {
position: absolute;
top: 15px;
left: 0;
color: #717171;
}

.form-control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
transition: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
color: #ffffffb7;
transform: translateY(-30px);
}