01. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), getAtrribute()
  • Css 요소 : translateX
  • setInterval()
확인하기

02. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute()
  • Css 요소 : translateX
  • setInterval()
확인하기

03. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute()
  • Css 요소 : translateY
  • setInterval()
확인하기

04. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : 변수, for문, forEach()
  • 데이터 제어하기 : if문
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute(),firstElementChild.cloneNode(), appendChild()
  • Css 요소 : translateX
  • setInterval()
확인하기

05. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 세로로로 움직이기 연속적으로

  • 데이터 저장하기 : 변수
  • 데이터 제어하기 : if문
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute(),firstElementChild.cloneNode(), appendChild()
  • Css 요소 : translateX
  • setInterval()
확인하기

06. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 버튼이동

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach()
  • 데이터 제어하기 : if문 forEach()
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : contains(), querySelector(), querySelectorAll(), getAtrribute()
  • Css 요소 : translateX
  • 이벤트 객체 : click
확인하기

07. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 버튼, 썸네일

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach()
  • 데이터 제어하기 : if문 forEach()
  • 데이터 실행하기 : 함수, 익명함수, 화살표함수
  • 라이브러리 : GSAP : to()
  • 라이브러리 : Jquery : $()animate
  • 요소 메서드 : querySelector(), querySelectorAll(), getAtrribute()
  • Css 요소 : translateX
  • 이벤트 객체 : click
확인하기