01. 마우스 이펙트 : 정답 확인하기 유형

마우스를 따라 다니는 기본적인 효과입니다.

  • 데이터 실행하기 : 함수
  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for(), forEach()
  • 이벤트 객체 : mousemove
  • 이벤트 속성 : clientX, clientY, offsetX, offsetY, pageX, pageY, screenX, screenY
  • 요소 객체 : getAttribute(), querySelector(), querySelectorAll()
확인하기

02. 마우스 이펙트

GSAP를 이용해서 마우스를 따라다니는 효과입니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 화살표 함수
  • 데이터 불러오기 : for(), forEach()
  • 이벤트 객체 : mousemove , mouseenter, mouseleave
  • 요소 객체 : querySelector()
  • 라이브러리 : GSAP : to()
확인하기

03. 마우스 이펙트

마우스를 따라다니는 조명 효과입니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 화살표 함수
  • 데이터 불러오기 : for(), forEach()
  • 이벤트 객체 : mousemove
  • 요소 객체 : querySelector(), clientWidth, clientHeight, offsetWidth, offsetHeight, getBoundingClientRect()
  • 라이브러리 : GSAP : to()
  • CSS : background-attachment : fixed;
확인하기

04. 마우스 이펙트

마우스를 따라다니는 조명 효과입니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 화살표 함수
  • 데이터 불러오기 : for(), forEach()
  • 이벤트 객체 : mousemove
  • 요소 객체 : querySelector(), pageX, pageY, innerWidth, innerHeight
  • 라이브러리 : GSAP : to()
  • CSS : pointer-events: none;
확인하기