Skip to content

Commit fc3b746

Browse files
solygambassolygambas
committed
add form wave animation
1 parent 5472158 commit fc3b746

File tree

3 files changed

+138
-0
lines changed

3 files changed

+138
-0
lines changed

Diff for: ‎08-form wave animation/index.html

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<title>Form Input Wave</title>
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Please Login</h1>
12+
<form>
13+
<div class="form-control">
14+
<input type="text" required />
15+
<label>Email</label>
16+
</div>
17+
<div class="form-control">
18+
<input type="password" required />
19+
<label>Password</label>
20+
</div>
21+
<button class="btn">Login</button>
22+
<p class="text">Don't have an account? <a href="#">Register</a></p>
23+
</form>
24+
</div>
25+
<script src="script.js"></script>
26+
</body>
27+
</html>

Diff for: ‎08-form wave animation/script.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const labels = document.querySelectorAll(".form-control label");
2+
3+
labels.forEach((label) => {
4+
label.innerHTML = label.innerText
5+
.split("")
6+
.map(
7+
(letter, idx) =>
8+
`<span style="transition-delay:${idx * 50}ms">${letter}</span>`
9+
)
10+
.join("");
11+
});

Diff for: ‎08-form wave animation/style.css

+100
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Muli&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: "Muli", sans-serif;
9+
background-color: steelblue;
10+
color: #fff;
11+
display: flex;
12+
flex-direction: column;
13+
align-items: center;
14+
justify-content: center;
15+
height: 100vh;
16+
overflow: hidden;
17+
margin: 0;
18+
}
19+
20+
.container {
21+
background-color: rgba(0, 0, 0, 0.4);
22+
padding: 20px 40px;
23+
border-radius: 5px;
24+
}
25+
26+
.container h1 {
27+
text-align: center;
28+
margin-bottom: 30px;
29+
}
30+
31+
.container a {
32+
text-decoration: none;
33+
color: lightblue;
34+
}
35+
36+
.btn {
37+
cursor: pointer;
38+
display: inline-block;
39+
width: 100%;
40+
background: lightblue;
41+
padding: 15px;
42+
font-family: inherit;
43+
font-size: 16px;
44+
border: 0;
45+
border-radius: 5px;
46+
}
47+
48+
.btn:focus {
49+
outline: 0;
50+
}
51+
52+
.btn:active {
53+
transform: scaleX(0.98);
54+
}
55+
56+
.text {
57+
margin-top: 30px;
58+
}
59+
60+
.form-control {
61+
position: relative;
62+
margin: 20px 0 40px;
63+
width: 300px;
64+
}
65+
66+
.form-control input {
67+
background-color: transparent;
68+
border: 0;
69+
border-bottom: 2px #fff solid;
70+
display: block;
71+
width: 100%;
72+
padding: 15px 0;
73+
font-size: 18px;
74+
color: #fff;
75+
}
76+
77+
.form-control input:focus,
78+
.form-control input:valid {
79+
outline: 0;
80+
border-bottom-color: lightblue;
81+
}
82+
83+
.form-control label {
84+
position: absolute;
85+
top: 15px;
86+
left: 0;
87+
}
88+
89+
.form-control label span {
90+
display: inline-block;
91+
font-size: 18px;
92+
min-width: 5px;
93+
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
94+
}
95+
96+
.form-control input:focus + label span,
97+
.form-control input:valid + label span {
98+
color: lightblue;
99+
transform: translateY(-30px);
100+
}

0 commit comments

Comments
 (0)