01. 패럴랙스 이펙트

패럴랙스 이펙트 : 메뉴 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

02. 패럴랙스 이펙트

패럴랙스 이펙트 : 사이드 메뉴

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

03. 패럴랙스 이펙트

패럴랙스 이펙트 : 숨김 메뉴 / 탑 버튼

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

04. 패럴랙스 이펙트

패럴랙스 이펙트 : 나타나기

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

05. 패럴랙스 이펙트

패럴랙스 이펙트 : 이질감 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

06. 패럴랙스 이펙트

패럴랙스 이펙트 : 텍스트 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

07. 패럴랙스 이펙트

패럴랙스 이펙트 : 리빌 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

08. 패럴랙스 이펙트

패럴랙스 이펙트 : 가로 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

09. 패럴랙스 이펙트

패럴랙스 이펙트 : 가로 세로 효과

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기

01. GSAP 패럴랙스 이펙트

GSAP 패럴랙스 이펙트 : 가로 모드

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : for문, forEach( ), for in문, for of문
  • 브라우저 객체 : 속성 : window.pageYOffset, window.scrollY, document.documentElement.scrollTop, scrollIntoView( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), getAttribute( ), innerText
  • 이벤트 객체 : 메서드 : addEventListener("scroll"), addEventListener("click"), preventDefault
  • 요함수 : parseInt( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기