01. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : setInterval
  • 요소 객체 : querySelector, querySelectorAll
  • 라이브러리 : gsap.to
슬라이드 효과 페이지 이동

02. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : setInterval
  • 요소 객체 : querySelector, querySelectorAll
  • 라이브러리 : gsap.to
슬라이드 효과 페이지 이동

03. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : setInterval
  • 요소 객체 : querySelector, querySelectorAll
  • 라이브러리 : gsap.to
슬라이드 효과 페이지 이동

04. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : setInterval
  • 요소 객체 : querySelector, querySelectorAll
  • 요소 속성 : clientWidth
  • 요소 메서드 : cloneNode : 요소 선택하여 복제하는 메서드입니다.
  • 요소 메서드 : appendChild : 지정된 요소를 특정 부모요소의 자식요소로 추가하는 메서드입니다.
  • 라이브러리 : gsap.to
슬라이드 효과 페이지 이동

05. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : setInterval
  • 요소 객체 : querySelector, querySelectorAll
  • 요소 속성 : clientHeight
  • 요소 메서드 : cloneNode : 요소 선택하여 복제하는 메서드입니다.
  • 요소 메서드 : appendChild : 지정된 요소를 특정 부모요소의 자식요소로 추가하는 메서드입니다.
  • 라이브러리 : gsap.to
슬라이드 효과 페이지 이동

06. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과 : 이미지 슬라이드 버튼, 닷 만들기

  • 데이터 저장하기 : 변수
  • 데이터 불러오기 : forEach
  • 데이터 실행하기 : 함수, 화살표함수
  • 이벤트 객체 : addEventListener("click")
  • 요소 객체 : querySelector, querySelectorAll
  • 요소 속성 : clientWidth
  • 요소 메서드 : classList
슬라이드 효과 페이지 이동

07. 슬라이드 이펙트

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

  • 데이터 저장하기 : 변수 + 배열, 변수 + 객체
  • 데이터 불러오기 : forEach, map
  • 데이터 실행하기 : 함수, 화살표함수
  • 이벤트 객체 : addEventListener("click")
  • 요소 객체 : querySelector, querySelectorAll
  • 요소 메서드 : classList
슬라이드 효과 페이지 이동
To Top