01. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 트랜지션 효과
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval()
- 요소 객체 : querySelector(), querySelectorAll()
- setInterval() : 일정한 간격으로 반복적으로 함수를 실행하는 메서드 입니다.
- CSS : opacity : 투명도를 조절하는 요소입니다.
02. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 좌로 움직이기
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval(), translateX
- 요소 객체 : querySelector(), querySelectorAll()
03. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 위로 움직이기
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval(), translateY
- 요소 객체 : querySelector(), querySelectorAll()
- 라이브러리 : GSAP : to(), jQuery
04. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 좌로 움직이기(연속적으로)
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval(), translateX ,offsetWidth
- 요소 객체 : querySelector(), querySelectorAll(), firstElementChild, cloneNode()
- 라이브러리 : GSAP : to(), jQuery
- firstElementChild : 요소의 첫 번째 자식 요소를 반환하는 속성입니다.
- cloneNode() : 요소를 복제하는 메서드입니다.
05. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 위로 움직이기(연속적으로)
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval(), translateY, offsetHeight
- 요소 객체 : querySelector(), querySelectorAll(), firstElementChild, cloneNode()
- 라이브러리 : GSAP : to(), jQuery
06. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 이미지 슬라이드(버튼, 닷메뉴)
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 이벤트 객체 : setInterval(), translateX, offsetWidth
- 요소 객체 : querySelector(), querySelectorAll(), classList, contains
- contains() : 요소가 특정 요소를 포함하고 있는지 여부를 확인하는 메서드입니다.
07. 슬라이드 이펙트
슬라이드 이펙트 기본적인 효과 : 썸네일 슬라이드(버튼, 썸네일)
- 데이터 저장하기 : 변수, 배열
- 데이터 실행하기: 함수, 화살표 함수
- 데이터 불러오기 : join()
- 이벤트 객체 : setInterval(), translateX, offsetWidth
- 요소 객체 : querySelector(), querySelectorAll(), classList