[JavaScript] 자바스크립트 Web Animations API 사용하기

176_자바스크립트 Web Animations API 사용하기 [적용] 자유도가 높은 모션을 생성하고 싶을 때 자바스크립트를 메인으로 모션을 생성하고 싶을 때 [문법] 메소드 의미 반환 요소.animate(객체, 객체) 애니메이션 처리 없음 [내용] Web Animations API* 는 자바스크립트에서 애니메이션을 사용하기 위한 하나의 수단이다. CSS Transitions와 CSS Animations는 CSS에 모션을 미리 등록해 놓아야 한다. 하지만 Web Animations API는 자바스크립트만으로 처리할 수 있어 종료 시점을 판단하기 쉽다는 장점이 있다. 첫 번째 인수는 시작과 종료 값을 포함하는 객체, 두 번째 인수는 애니메이션 속성을 포함하는 객체를 지정한다. *Web Animations ..

2022.07.18

[JavaScript] 자바스크립트 마우스 좌표 확인하기

115_자바스크립트 마우스 좌표 확인하기 [적용] 마우스의 클릭 위치를 확인하고 싶을 때 마우스 움직임에 따라 요소를 반응시키고 싶을 때 [문법] 속성 내용 타입 event.clientX 브라우저 좌측 상단 기준 X 좌표 숫자 event.clientY 브라우저 좌측 상단 기준 Y 좌표 숫자 event.offsetX 요소 좌측 상단 기준 X 좌표 숫자 event.offsetY 요소 좌측 상단 기준 Y 좌표 숫자 event.pageX 페이지 좌측 상단 기준 X 좌표 숫자 event.pageY 페이지 좌측 상단 기준 Y 좌표 숫자 event.screenX 디바이스 좌측 상단 기준 X 좌표 숫자 event.screenY 디바이스 좌측 상단 기준 Y 좌표 숫자 [내용] click 이벤트와 mousemove 이벤트..

2022.06.25