<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Project #13 - Input Wave Effect</title>
  </head>
  <body>
    <h1>연락해 주세요</h1>
    <div class="form-control">
      <input type="text" required />
      <label>이메일</label>
    </div>

    <div class="form-control">
      <input type="password" required />
      <label>비밀번호</label>
    </div>

    <!-- JS File -->
    <script src="app.js"></script>
  </body>
</html>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100vh;
  width: 100vw;
  background-color: aquamarine;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

h1 {
  font-weight: lighter;
  font-size: 50px;
  margin-bottom: 60px;
}

.form-control {
  position: relative;
  margin: 20px 0;
  width: 300px;
}

.form-control input {
  border: 0;
  border-bottom: 1px solid #fddb3a;
  outline: none;
  display: block;
  font-family: inherit;
  padding: 15px 0;
  width: 100%;
  font-size: 20px;
}

.form-control input:focus,
.form-control input:valid {
  border-bottom-color: darkolivegreen;
  outline: none;
}

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  font-size: 20px;
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: darkolivegreen;
  transform: translateY(-30px);
}
/* 우측으로 색이 변화. 아래의 이벤트 없으면 색만 변한다. */

/* Dynamic Element */
.form-control label span {
  display: inline-block;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  /* 모든 요소를 0.3초 동안 큐빅-베지어로 이동시킨다. */
  min-width: 5px;
}

const labels = document.querySelectorAll(".form-control label");

// map은 기능과 배열을 정하고. 배열의 인자들에 대해 기능을 실행한다. 그리고 기능이 적용된 아이템들에 대한 새로운 배열을 만든다. 

labels.forEach(function (label) {
  label.innerHTML = label.innerText
    .split("")
    .map(
      (letter, index) =>
        `<span style="transition-delay: ${index * 50}ms">${letter}</span>`
    )
    //글자를 split으로 분해하여 한글자씩으로 만들고 순서대로 50초의 배수만큼, 이동 딜레이를 줘서 물결치는 효과를 줌.
    .join("");
    //join으로 배열의 모든 요소 연결, 문자열 반환.
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.