본문 바로가기

프론트엔드/자바스크립트

자바스크립트 모듈 - 버튼물결

반응형

자바스크립트로 버튼 클릭 물결효과 모듈을 만들어 보았습니다. 완성된 물결효과 코드는 아래와 같은데요. 요소의 위치와 클릭이벤트를 사용하여 효과를 적용하는 방식입니다.

// wave-module.js

export function createEffect() {
  const btn = document.querySelector('button')
  const rippleEl = document.querySelector('.ripple')

  btn.addEventListener('click', (e) => {
    rippleEl.classList.add('clicked')
    rippleEl.style.left = `${e.clientX - e.target.getBoundingClientRect().x}px`
    rippleEl.style.top = `${e.clientY - e.target.getBoundingClientRect().y}px`
    setTimeout(() => {
      rippleEl.classList.remove('clicked')
    }, 1500)
  })
}

적용하기

모듈의 사용은 HTML 파일에 메인 자바스크립트 링크에 타입요소를 추가하고

type="module"
<!-- index.html -->

<!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" />
  <title>Document</title>

  <!-- custom style -->
  <link rel="stylesheet" href="main.css" />
  <script defer type="module" src="index.js"></script>
</head>

<body>
  <button>Click
    <div class="ripple"></div>
  </button>
</body>

</html>

CSS파일에 아래 스타일을 추가합니다

/* module.css */

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

body {
  height: 100vh;
  background-color: #3c3232;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  height: 70px;
  width: 150px;
  border-radius: 5px;
  background-color: rgb(226, 43, 177);
  color: aliceblue;
  position: relative;
  overflow: hidden;
}

.ripple {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation: widen 1.5s ease forwards;
  background-color: rgba(255, 255, 255, .4);  
}

.ripple.clicked {
  display: initial;
}

@keyframes widen {
  0% {
    transform: translate(-50%, -50%) scale(0);
  }

  80% {
    transform: translate(-50%, -50%) scale(1);
  }

  100% {
    opacity: 0;
  }
}

마지막으로 메인 자바스크립트 파일에서 아래 함수를 호출하면 완성됩니다.

// index.js

import { createEffect } from "./module.js";

createEffect()

이상으로 버튼클릭 물결효과를 만드는 방법과 모듈을 사용하여 간단히 적용하는 방법을 살펴보았습니다.

 

728x90
반응형

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

노드몬  (0) 2023.12.12
리덕스  (1) 2023.06.25
엔피엠 - 제이슨 서버  (0) 2023.05.22
자바스크립트 모듈 - 물결효과  (0) 2023.04.05
반응형 웹 디바이스 구분하기  (3) 2023.03.23