01. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval()
  • 요소 객체 : querySelector(), querySelectorAll()
확인하기

02. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateX
  • 요소 객체 : querySelector(), querySelectorAll()
확인하기

03. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateY
  • 요소 객체 : querySelector(), querySelectorAll()
확인하기

04. 슬라이더 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateX ,offsetWidth
  • 요소 객체 : querySelector(), querySelectorAll(), firstElementChild, cloneNode()
확인하기

05. 슬라이더 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateY, offsetHeight
  • 요소 객체 : querySelector(), querySelectorAll(), firstElementChild, cloneNode()
확인하기

06. 슬라이더 이펙트

슬라이드 이펙트 기본적인 효과 : 이미지 슬라이드(버튼, 닷메뉴)

  • 데이터 저장하기 : 변수, 배열
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateX, offsetWidth
  • 요소 객체 : querySelector(), querySelectorAll(), classList, contains
확인하기

07. 슬라이더 이펙트

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

  • 데이터 저장하기 : 변수, 배열
  • 데이터 불러오기 : join()
  • 데이터 실행하기 : 함수, 화살표 함수
  • 이벤트 객체 : setInterval(), translateX, offsetWidth
  • 요소 객체 : querySelector(), querySelectorAll(), classList
확인하기