01. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 트렌지션 효과

  • 데이터 저장하기 : 변수
  • 함수 메서드 : setInterval( )
  • 요소 객체 : querySelector( ), querySelectorAll( )
  • CSS : opacity
  • 라이브러리 : GSAP : gsap.to( )
  • 라이브러리 : jQuery : $( )
확인하기

02. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 좌로 움직이기

  • 데이터 저장하기 : 변수
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( )
  • 함수 : 메서드 : setInterval( )
  • 라이브러리 : GSAP : gsap.to( )
  • 라이브러리 : jQuery : $( )
확인하기

03. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 위로 움직이기

  • 데이터 저장하기 : 변수
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( )
  • 요소 객체 : 속성 : offsetWidth
  • 메서드 : setInterval( )
  • 라이브러리 : GSAP : gsap.to( )
  • 라이브러리 : jQuery : $( )
확인하기

04. 슬라이드 이펙트

슬라이드 이펙트 : 좌로 움직이기 (연속적으로)

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수
  • 데이터 제어하기 : if문
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( )
  • 요소 객체 : 속성 : offsetHeight
  • 메서드 : firstElementChild ,appendChild, cloneNode
  • 함수 메서드 : setInterval( ), setTimeout( )
  • 라이브러리 : GSAP : gsap.to( )
  • 라이브러리 : jQuery : $( )
확인하기

05. 슬라이드 이펙트

슬라이드 이펙트 : 위로 움직이기 (연속적으로)

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수
  • 데이터 제어하기 : if문
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( )
  • 요소 객체 : 속성 : offsetWidth
  • firstElementChild, appendChild , cloneNode
  • setInterval( ), setTimeout( )
  • 라이브러리 : GSAP : gsap.to( )
  • 라이브러리 : jQuery : $( )
확인하기

06. 슬라이드 이펙트

슬라이드 이펙트 : 버튼,닷메뉴

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, forEach( )
    • >
  • 데이터 제어하기 : if문
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), innerHTML
  • 이벤트 객체 : 메서드 : addEventListener("click")
확인하기

06. 슬라이드 이펙트

슬라이드 이펙트 : 버튼,썸네일

  • 데이터 저장하기 : 변수, 배열
  • 데이터 불러오기 : map( )
  • 데이터 실행하기 : 함수, forEach( )
  • 데이터 제어하기 : if문
  • 배열 객체 : join( )
  • 요소 객체 : 메서드 : querySelector( ), querySelectorAll( ), innerHTML
  • 이벤트 객체 : 메서드 : addEventListener("click")
확인하기