-
Notifications
You must be signed in to change notification settings - Fork 0
/
ripple-effect.js
40 lines (31 loc) · 1.14 KB
/
ripple-effect.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
/*
# Creator: Aryon Rabello
# GitHub: https://github.com/arriaoedu123/
# Creation date: 18/11/2021
# Version: 1.0
*/
var buttons = document.querySelectorAll(".ripple").length
for (let i = 0; i < buttons; i++) {
document.querySelectorAll(".ripple")[i].addEventListener("click" , (event) => {
const button = event.target
const wave = document.createElement("span")
wave.classList.add("wave")
button.insertAdjacentElement("beforeend", wave)
const buttonPosition = button.getBoundingClientRect()
const top = event.clientY - buttonPosition.top
const left = event.clientX - buttonPosition.left
const scale = Math.min(buttonPosition.height, buttonPosition.width)
wave.style.setProperty("--top", `${top}px`)
wave.style.setProperty("--left", `${left}px`)
wave.style.setProperty("--opacity", 1)
wave.style.setProperty("--scale", scale)
function clearRipple() {
wave.style.setProperty("--opacity", 0)
wave.removeEventListener("transitionend", clearRipple)
wave.addEventListener("transitionend", () => {
wave.remove()
})
}
wave.addEventListener("transitionend", clearRipple)
})
}