javascript

01. 마우스 이펙트

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

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

확인하기

02. 마우스 이펙트

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

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

확인하기

03. 마우스 이펙트

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

• 데이터 저장하기 : 변수
• 데이터 실행하기 : 함수, 화살표 함수
• 요소 객체 : 속성 : clientWidth, clientHeight, offsetWidth, offsetHeight
• 요소 객체 : 메서드 : querySelector( ), getBoundingClientRect( )
• 이벤트 객체 : 메서드 : addEventListener("mousemove")
• 라이브러리 : GSAP : to( )
• CSS : background-attachment: fixed;

확인하기

04. 마우스 이펙트

마우스의 움직임에 따라 이미지와 커서가 움직이는 효과입니다.

• 데이터 저장하기 : 변수
• 데이터 실행하기 : 함수, 화살표 함수
• 브라우저 객체 : window.innerWidth, window.innerHeight
• 요소 객체 : 속성 : clientWidth, clientHeight, offsetWidth, offsetHeight
• 요소 객체 : 메서드 : querySelector( ), getBoundingClientRect( )
• 이벤트 객체 : 메서드 : addEventListener("mousemove")
• 이벤트 객체 : 속성 : pageX, pageY
• 라이브러리 : GSAP : to( )

확인하기