JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.
Detailed Summary for [[subtitle] 무한슬라이드 - javascript animate 함수 활용, easing 추가]
(https://www.youtube.com/embed/B98b6xXh7PY?autoplay=1)
💫 요약
이 동영상은 JavaScript의 animate 함수와 easing을 활용하여 무한 슬라이드를 구현하는 방법을 설명하고 있다. 슬라이드는 왼쪽으로 움직이며, 순환되어 다시 오른쪽에서 나타난다. 페이저를 클릭하면 해당 슬라이드가 움직이는 기능도 있다.
✨ 하이라이트
[00:10](https://www.youtube.com/watch?v=B98b6xXh7PY&t=10) 이 섹션에서는 무한 슬라이드를 구현하는 방법에 대해 설명합니다.- 완성된 버전을 보여주고, 슬라이드가 왼쪽으로 움직이는 것을 보여줍니다.
- 슬라이드를 클릭할 때마다 해당 슬라이드가 오른쪽에서 들어옵니다.
- 슬라이드 컨테이너에는 가로로 정렬된 슬라이드들이 있으며, 오른쪽으로 넘어가는 슬라이드는 가려진 상태입니다.
- 자바스크립트의 Animate 함수를 사용하여 슬라이드를 움직입니다.
[04:17](https://www.youtube.com/watch?v=B98b6xXh7PY&t=257) 슬라이드 컨테이너를 기준으로 모든 슬라이드가 절대값으로 한 곳에 모이게 하고, 현재 활성화된 슬라이드는 검은색으로 처리됩니다.- 페이저는 슬라이드의 개수에 따라 4개의 A 태그를 가지고 있으며, 현재 활성화된 슬라이드는 검은색으로 표시됩니다.
- 슬라이드에는 절대 위치를 주어야 하며, 이때 위치는 슬라이드 래퍼를 기준으로 결정됩니다.
- 슬라이드의 높이도 모든 요소와 동일하게 설정되어야 하며, 부모 요소의 높이를 기준으로 설정됩니다.
- 페이저는 중앙에 위치하며, 내부 요소를 가운데 정렬합니다.
[08:34](https://www.youtube.com/watch?v=B98b6xXh7PY&t=514) JavaScript로 변수와 산술 연산을 결합하여 문장을 만들 때, 백틱과 % 기호를 사용해야 한다.- idx 변수 이름을 100으로 곱하여 0일 때는 0, 1일 때는 100, 2일 때는 200이 되도록 한다.
- 화면을 확인하면 1이 나타나고, 오른쪽에 숫자 2가 있으며, 오른쪽에 숫자 3이 있다.
- pager를 생성하기 위해 번호에 따라 pager를 생성해야 한다.
- 반복문이 실행될 때마다 A 태그가 생성되고, 최종적으로 pager라는 요소에 HTML로 추가된다.
[12:52](https://www.youtube.com/watch?v=B98b6xXh7PY&t=772) addEventListener를 사용하여 클릭 이벤트를 처리하는 방법에 대해 설명합니다.- 클릭 이벤트가 발생한 객체는 'E'라는 매개변수로 전달됩니다.
- preventDefault를 사용하여 기본 동작을 막을 수 있습니다.
- MoveSlide 함수는 인덱스 번호에 따라 슬라이드를 이동시킵니다.
- 현재 인덱스 번호와 전달된 번호를 비교하여 동작을 결정합니다.
[17:08](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1028) animate 함수의 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.- 옵션에는 지연, 시작 시간, 방향, 기간, 이징 등이 포함될 수 있다.
- 이징에는 cubicBezier의 속도 모델을 추가할 수 있다.
- 애니메이션의 fill-mode는 기본적으로 back이다.
[21:23](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1283) 이 섹션에서는 일반적으로 사용되는 easing을 추가하는 방법을 설명합니다.- easings.net에서 일반적으로 사용되는 easing을 확인합니다.
- cubic-bezier 값을 복사하여 사용합니다.
- 현재 슬라이드와 다음 슬라이드에 left 값 변경을 적용합니다.
- 애니메이션의 fill mode를 forwards로 설정하여 정지합니다.
[25:42](https://www.youtube.com/watch?v=B98b6xXh7PY&t=1542) 자동 슬라이드를 구현하기 위해 setInterval 함수를 사용하여 일정 시간마다 다음 슬라이드를 보여주는 함수를 생성한다.- setInterval 함수를 사용하여 일정 시간마다 작업을 수행한다.
- 다음 인덱스를 생성하여 현재 인덱스에 1을 더한다.
- 슬라이드의 개수로 나눈 나머지를 다음 인덱스로 선택한다.