01. 패럴랙스 이펙트

상단에 메뉴바를 만들어 현재의 위치에 따라 이펙트를 주고 버튼을 활성화 합니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기: 화살표 함수
  • 데이터 불러오기: forEach()
  • 이벤트 객체 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, offsetTop
  • 요소 객체 : querySelector(), querySelectorAll(), getAttribute(), classList
  • CSS : behavior
  • behavior : 요소에 대한 특정 동작이나 기능을 캡슐화하고, 재사용성을 높일 수 있습니다.
  • getAttribute() : 요소의 속성(attribute) 값을 가져오는 메서드입니다.
확인하기

02. 패럴랙스 이펙트

사이드에 메뉴바를 만들어 현재의 위치에 따라 이펙트를 주고 버튼을 활성화 합니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기: 화살표 함수
  • 데이터 불러오기: forEach()
  • 이벤트 객체 : window.pageYOffset, window.scrollY, offsetTop, scrollTop, preventDefault()
  • 요소 객체 : querySelector(), querySelectorAll(), getAttribute(), scrollIntoView(), classList
  • preventDefault() : 이벤트의 기본 동작을 중단시키는 메서드입니다.
확인하기

03. 패럴랙스 이펙트

Skrollr를 이용하여 만든 사이트 입니다.

  • 데이터 저장하기 : 변수
  • 데이터 실행하기: 화살표 함수
  • 이벤트 객체 : window.pageYOffset, window.scrollY, scrollTop
  • 요소 객체 : addEventListener(), querySelector
  • 라이브러리 : Skrollr
  • Skrollr : 페이지 스크롤 위치를 계산하여 화면에 표시하는 코드입니다.
확인하기