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