00. 패럴렉스 이펙트

패럴렉스 이펙트 / 패럴렉스 이펙트 연습

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

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( ) : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환합니다.
확인하기