Skip to content

Commit d5766f0

Browse files
FinnFinn
Finn
authored and
Finn
committed
day-1 button-ripple-effect
1 parent 487bd41 commit d5766f0

File tree

4 files changed

+107
-1
lines changed

4 files changed

+107
-1
lines changed

button-ripple-effect/script.js

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,25 @@ const buttons = document.querySelectorAll('.ripple')
22

33
buttons.forEach(button => {
44
button.addEventListener('click', function (e) {
5+
// e is an event object
6+
// clientx provides the horizontal coordinate within the viewport (currently being shown)
7+
// at which the event occur( as opposed to the coordinate within the page)
58
const x = e.clientX
69
const y = e.clientY
710

11+
// event.target provides the reference to the object onto which the event was dispatched 触发事件
12+
// it is different from event.currentTarget when the handler is called during the bubbling or capturing phase of the event
13+
14+
// five values that position can take : static, absolute, relative, fixed, sticky.
15+
// offsetTop is the distance between the current node and the closest offset parent( whose position is non-static )
16+
// if there is on offset parent, return body
817
const buttonTop = e.target.offsetTop
918
const buttonLeft = e.target.offsetLeft
1019

1120
const xInside = x - buttonLeft
1221
const yInside = y - buttonTop
13-
22+
console.log(e,x,y,'x,y',buttonLeft,buttonTop,'offsetTop,offsetLeft')
23+
console.log(this === e.target,'this')
1424
const circle = document.createElement('span')
1525
circle.classList.add('circle')
1626
circle.style.top = yInside + 'px'
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Document</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<button class="ripple">click me</button>
12+
<script src="script.js"></script>
13+
</body>
14+
</html>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const rippleButtons = document.querySelectorAll('.ripple');
2+
3+
function rippleClick(e){
4+
console.log(123)
5+
const clientX = e.clientX
6+
const clientY = e.clientY
7+
8+
const target = e.target
9+
const offsetLeft = target.offsetLeft
10+
const offsetTop = target.offsetTop
11+
12+
const xInside = clientX - offsetLeft;
13+
const yInside = clientY - offsetTop;
14+
15+
const spanNode = document.createElement('span');
16+
spanNode.classList.add('rippleCircle');
17+
// type of value style.left is a string
18+
spanNode.style.left = xInside + 'px'
19+
spanNode.style.top = yInside + 'px'
20+
21+
target.appendChild(spanNode)
22+
23+
setTimeout(()=>{
24+
spanNode.remove()
25+
},500)
26+
}
27+
28+
console.log(rippleButtons,'rippleButtons')
29+
rippleButtons.forEach((ele) =>{
30+
ele.addEventListener('click',rippleClick)
31+
})
Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
background-color: #000;
9+
font-family: 'Roboto', sans-serif;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
overflow: hidden;
16+
margin: 0;
17+
}
18+
19+
button {
20+
background-color: purple;
21+
color: #fff;
22+
border: 1px purple solid;
23+
font-size: 14px;
24+
text-transform: uppercase;
25+
letter-spacing: 2px;
26+
padding: 20px 30px;
27+
overflow: hidden;
28+
margin: 10px 0;
29+
position: relative;
30+
}
31+
32+
button:focus {
33+
outline: none;
34+
}
35+
/* why set translate(-50%,50%)? */
36+
/* to set center of the ripple element at the place where the mouse is÷\ */
37+
.rippleCircle{
38+
position: absolute;
39+
width: 100px;
40+
height: 100px;
41+
background-color: #fff;
42+
border-radius: 50%;
43+
transform: translate(-50%, -50%) scale(0);
44+
animation: circle .5s ease-out;
45+
}
46+
@keyframes circle{
47+
to{
48+
transform: translate(-50%, -50%) scale(3);
49+
opacity: 0;
50+
}
51+
}

0 commit comments

Comments
 (0)