This tutorial will mainly focus on how to use transitions in CSS to create a form input label wave.i used javascript to create the wave effect input label.when input is focused. Let's dive into the world of transition!
Today I have learned to wave the form input, in this I have done HTML CSS and JavaScript, also with the help of CSS, I have given the transition of the label in the input.
Here's My HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Form Input Wave</title>
</head>
<body>
<div class="container">
<h1>PLease Login</h1>
<form>
<div class="form-control">
<input type="text" required>
<label>Email</label>
</div>
<div class="form-control">
<input type="password" required>
<label>Password</label>
</div>
<button class="btn">Login</button>
<p class="text">Don't have an account?</p>
<a href="#">Register</a>
</form>
</div>
<script src="./script.js"></script>
</body>
</html>
Here's My CSS code
@import url("https://fonts.googleapis.com/css?family=Ubuntu");
* {
box-sizing: border-box;
}
body {
background-color: steelblue;
color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Ubuntu", sans-serif;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
background-color: rgba(0, 0, 0, 0.4);
padding: 20px 40px;
border-radius: 5px;
}
.container h1 {
text-align: center;
margin-bottom: 30px;
}
.container a {
text-decoration: none;
color: lightblue;
}
.btn {
cursor: pointer;
display: inline-block;
width: 100%;
background: lightblue;
padding: 15px;
font-family: inherit;
font-size: 16px;
border: 0;
border-radius: 5px;
}
.btn:focus {
outline: 0;
}
.form-control {
position: relative;
margin: 20px 0 40px;
width: 300px;
}
.btn:hover {
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.btn:active {
transform: scale(0.98);
}
.text {
margin-top: 30px;
}
.form-control input {
background-color: transparent;
border: 0;
border-bottom: 2px #fff solid;
display: block;
width: 100%;
padding: 15px 0;
font-size: 18px;
color: #fff;
}
.form-control input:focus,
.form-control input:valid {
outline: 0;
border-bottom-color: lightblue;
}
.form-control label {
position: absolute;
top: 15px;
left: 0;
}
.form-control label span {
display: inline-block;
font-size: 18px;
min-width: 5px;
transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.form-control input:focus + label span,
.form-control input:valid + label span {
color: lightblue;
transform: translateY(-30px);
}
Here's My JAVASCRIPT code
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("");
});
Here's output on Code pen lets see..
Top comments (2)
Nice and simple effect π
Here's a one liner because everyone's giving them out these days.
Hiya Ahtsham, me again, I spotted a bug π©
The span labels sometimes get in the way on a mobile because they float above the input, a tap or click on the lettering then blocks the focus.
Never fear, here is one of several solutions
Now you can "click through" the spans as if they where ghosts π», spooky right?