자바스크립트로 로그인 폼 애니메이션 구현하기

18 Oct 2023

javascript

이번에는 자바스크립트를 사용하여 로그인 폼에 애니메이션 효과를 구현하는 방법에 대해 알아보겠습니다.

필요한 HTML 마크업

먼저, 로그인 폼에 대한 HTML 마크업을 작성해야 합니다. 아래는 간단한 로그인 폼의 예시입니다.

<form>
  <input type="text" placeholder="아이디">
  <input type="password" placeholder="비밀번호">
  <button type="submit">로그인</button>
</form>

CSS 스타일링

로그인 폼을 꾸며주기 위해 CSS 스타일링을 적용해야 합니다. 원하는 디자인에 맞게 CSS를 작성해주세요.

form {
  width: 300px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
}

input {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

자바스크립트 애니메이션 구현

이제 애니메이션 효과를 구현하기 위해 자바스크립트 코드를 작성해보겠습니다.

const form = document.querySelector('form');
const inputs = document.querySelectorAll('input');

form.addEventListener('submit', function(e) {
  e.preventDefault(); // 기본 동작 막기

  inputs.forEach(function(input) {
    if (input.value === '') {
      input.classList.add('error');
    }
  });

  form.classList.add('shake');

  setTimeout(function() {
    form.classList.remove('shake');
    inputs.forEach(function(input) {
      input.classList.remove('error');
    });
  }, 1000);
});

위 코드에서는 form 요소와 input 요소들을 선택한 후, 폼이 제출될 때마다 입력값을 체크하고 비어있는 경우 에러 클래스를 추가합니다. 그리고 폼 요소에 shake 클래스를 추가하여 흔들림 효과를 적용한 후 1초 뒤에 클래스를 제거합니다.

CSS 애니메이션 효과 추가

애니메이션 효과를 보다 합니다. 이를 위해 CSS에 다음 스타일을 추가해주세요.

.shake {
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
}

.error {
  border-color: red;
}

결과 확인하기

이제 HTML에 CSS 및 JavaScript 파일을 연결한 후, 로그인 폼을 확인해보세요. 폼을 제출할 때 입력값이 비어있는 경우 에러 효과와 흔들림 효과가 적용될 것입니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login Form Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form>
    <input type="text" placeholder="아이디">
    <input type="password" placeholder="비밀번호">
    <button type="submit">로그인</button>
  </form>
  
  <script src="main.js"></script>
</body>
</html>

결론

위의 방법을 사용하여 자바스크립트로 로그인 폼에 애니메이션 효과를 구현할 수 있습니다. 이를 통해 사용자들에게 보다 직관적이고 시각적으로 효과적인 로그인 인터페이스를 제공할 수 있습니다.

참고 자료:

#javascript #animation