01. 마우스 이펙트

마우스 이펙트 - 마우스 따라다니기

  • 데이터 실행하기 : 함수
  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for(), forEach()
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute()
  • 이벤트 객체 : mousemove, moseover, mouseout
  • 이벤트 속성 : ClientX, ClientY, offsetX ,offsetY, pageX, pageY, screenX, screenY
확인하기

02. 마우스 이펙트

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

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

03. 마우스 이펙트

마우스를 따라다니는 돋보기 효과 입니다.

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

04. 마우스 이펙트

마우스를 이미지 안에 가두고 마우스에 방향에 따라 이미지가 따라오는 효과 입니다.

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