01. 마우스 이펙트
마우스를 따라다니는 기본적인 효과입니다.
- 데이터 저장하기 : 변수
- 데이터 불러오기 : for(), foreach()
- 데이터 실행하기 : 함수
- 이벤트 객체 : mousemove, mouseover, mouseout
- 이벤트 객체 : addEventListener("mousemove")
- 이벤트 속성 : clientX : X축 좌표값 : 브라우저 기준, clientY : Y축 좌표값 : 브라우저 기준 ,offsetX : X축 좌표값 : 요소 기준 , offsetY : Y축 좌표값 : 요소 기준 pageX : x축 좌표값 :페이지 기준 pageY : Y축 좌표값 : 페이지 기준 screenX : X축 좌표값 : 디바이스 기준 screenY : Y축 좌표값 : 디바이스 기준
- 이벤트 객체 : getAttribute
- 요소 객체 : querySelector(), querySelectorAll(),getAttribute()/li>
02. 마우스 이펙트
GSAP를 이용해 따라다니는 기본적인 효과입니다.
- 데이터 저장하기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 데이터 불러오기 : for(),foreach()
- 요소 객체 : querySelector()
- 이벤트 객체 : mousemove, mouseenter, mouseleave
- 라이브러리 : GSAP : to()
03. 마우스 이펙트
마우스를 따라다니는 조명 효과입니다.
- 데이터 불러오기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 이벤트 객체 : mousemove()
- 요소 객체 : qurrySelector(), clientWidth, clientHeight, offsetHeight, offsetWidth
- 라이브러리 : GSAP : to()
- css : background-attachment: fixed;
04. 마우스 이펙트
마우스를 따라다니는 조명 효과입니다.
- 데이터 불러오기 : 변수
- 데이터 실행하기 : 함수, 화살표 함수
- 이벤트 객체 : mousemove()
- 요소 객체 : qurrySelector(), clientWidth, clientHeight, offsetHeight, offsetWidth
- 라이브러리 : GSAP : to()
- css : background-attachment: fixed;