html - jquery에서 setInterval을 사용하여 루프에서 기어 스크롤 만들기

Question

지금 만들고 있는 애니메이션은 마우스를 가리키면 스크롤 이벤트가 발생하는 것입니다. 우리가 만들고 싶은 애니메이션은 페이지가 로드된 후 일정 기간 후에 기어가 다시 롤아웃되는 것입니다. 시간의. 오른쪽 스크롤과 왼쪽 스크롤 모두 가능하지만 jquery에서 "일정 시간 후 + 롤아웃 후 롤백..."이라고 쓰는 방법을 모르겠습니다.

仅有的幸福 · Answer

滿天的星座 · Answer

가끔 setInterval 기능을 사용해 보세요:

으아아아

高洛峰 · Answer

방법 1: 순수 CSS 구현
두 기어에 왼쪽 스크롤 및 오른쪽 스크롤 스타일 추가
html

으아아아

스타일에 무한 루프 스크롤 애니메이션을 추가했습니다.
나갔다가 잠시 후에 다시 돌아와야 하는 경우 translate(-1000px) 값을 2000px 등으로 늘리고 필요에 따라 제어할 수 있습니다.
번역 값이 증가한 후에는 그에 따라 회전 값도 증가해야 하며 필요에 따라 조정할 수 있습니다.
css

으아아아

방법 2: jquery 컨트롤 사용
jquery 컨트롤을 사용하려면 CSS를 수정해야 합니다

으아아아

js

으아아아