01. 페럴랙스 효과

페럴랙스 이펙트 기본적인 효과 : 메뉴 효과

  • 데이터 저장하기 : 변수
  • 데이터 제어하기 : if문, forEach, for 문
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 요소 메서드 : scrollIntoView(), addEventListener(), querySelector(), querySelectorAll(), getAtrribute()
  • 요소 객체 : offsetTop , pageYOffset
  • 수학 메서드 : parseInt()
  • 이벤트 객체 : scroll, click
확인하기

02. 페럴랙스 이펙트

페럴랙스 이펙트 기본적인 효과 : 닷버튼 움직이기

  • 데이터 저장하기 : 변수
  • 데이터 제어하기 : if문, forEach, for 문
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 요소 메서드 : scrollIntoView(), addEventListener(), querySelector(), querySelectorAll(), getAtrribute()
  • 요소 객체 : offsetTop , pageYOffset, scrollY
  • 수학 메서드 : parseInt()
  • 이벤트 객체 : scroll, click
확인하기

AA. 슬라이드 이펙트

슬라이드 이펙트 효과 : skrollr 이용한 애니매이션 구현

  • 수학 메서드 : parseInt()
  • 요소 객체 : offsetTop , pageYOffset, scrollY
  • 이벤트 객체 : scroll
확인하기