버튼 클릭하면 물결처럼 원이 나타나는 효과(리플효과)

버튼 클릭하면 물결처럼 원이 나타나는 효과를 만들어 보았다.

 

이런 기능 진짜 해보고 싶었는데 마침 유튜브의 '맛있는코딩'님의 영상에 이런 내용이... 정말 취향저격 영상밖에 없다...

맛있는 코딩 yummy coding - YouTube

맛있는 코딩 yummy coding

원래 영상들 보면 배속해서 보는데 영상이 빨라서 정지 버튼 누르면서 보는 게 함정...

 

 

영상 보고 따라 만들어 봤는데 모르는 부분이 꽤 많았다. 사실 마우스에 대한 효과를 주는 것들을 배우지 않아서 대강 마우스의 x, y 값을 읽어와야 한다는 것만 알고 있기 때문에 공부의 필요성을 느끼긴 했다. 실제 실무에서 활용도가 어느 정도 될까 싶지만....

See the Pen Untitled by ssoa1111 (@ssoa1111) on CodePen.

 

 

 

 

필요한 계산식

왜 이런 식이 나오는지는 영상에 잘 나와있다.

원의 반지름 : Math.sqrt(w^2 + h^2) left : (마우스 clientX - 버튼 왼쪽 여백 - 원의 반지름) / 버튼 가로 길이 * 100 %  top : (마우스 clientY - 버튼 위쪽 여백 - 원의 반지름) / 버튼 높이 * 100 %

 

 

 

getBoundingClientRect()

내장 객체를 이용하여 x, y, width, height를 비구조 할당으로 가져온다. 

MDN 출처

Element.getBoundingClientRect() - Web API | MDN (mozilla.org)

Element.getBoundingClientRect() - Web API | MDN

가져온 값을 원의 반지름 공식에 적용한다.

 

 

 

setProperty()

CSS의 속성을 변수처럼 선언할 수 있다.

javascript : setProperty('이름', 값)

css에 전달할 때 value값에 : var(이름)

MDN 출처

CSSStyleDeclaration.setProperty() - 웹 API | 증권 시세 표시기 (mozilla.org)

CSSStyleDeclaration.setProperty() - Web APIs | MDN

>> 이건 예시도 잘 되어있어서 여러 번 봐줄 필요가 있다.

 

 

 

clientX, clientY

이벤트를 매개변수로 e.clientX, e.clientY로 현재 요소 내의 마우스의 위치를 알 수 있다.

참고로 screenX, screenY로 스크린 기준으로 마우스 위치를 알 수 있다.

MDN 출처

MouseEvent.clientX - Web API | MDN (mozilla.org)

MouseEvent.clientX - Web API | MDN

 

 

 

setTimeout()

클릭할 때마다 효과를 나타내기 위한 setTimeout()

그전에 속성 값을 초기화하고 setTimeout()에서 속성 값을 넣어서 클릭할 때 초기화 > 실행이 가능하게 함

(setTimeout()을 이렇게도 쓸 수 있구먼...)