일부 이미지에 대해 CSS를 작성 중인데 기본적으로 제가 달성하고 싶은 것은 왼쪽에서 오른쪽으로 이동해야 하는 이미지가 있고 오른쪽 끝에 도달하면 다시 왼쪽으로 나타나야 한다는 것입니다. 이를 달성하려면 다음 코드를 사용하세요.
으아악 으아악
이것은 모바일 CSS가 아닌 데스크톱에서 작동하며 내 페이지에 스크롤을 추가합니다. 이미지가 오른쪽에 도달하더라도 다시 왼쪽에서 나오지만 이미지 컨테이너의 너비는 100vw이고 이미지는 페이지의 시작 부분에 있습니다. 이미지가 도달할 때 컨테이너 맨 오른쪽에는 페이지의 다른 절대 요소에 영향을 미치는 컨테이너 너비로 인해 스크롤이 있습니다. 스크롤을 비활성화하거나 다른 방법을 사용하여 영향을 미치는 것과 동일한 효과를 얻을 수 있습니다. 다른 것도 마찬가지입니다. 절대적인 요소.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
당신이 직면한 문제는 애니메이션 요소가 뷰포트 외부로 이동하여 페이지가 스크롤되기 때문에 발생합니다. 이를 방지하는 한 가지 방법은 상위 컨테이너에서 오버플로를 숨기는 것입니다. 그러나 이것이 페이지의 다른 절대 요소에 영향을 미친다고 언급했으므로 왼쪽 또는 오른쪽 속성을 변경하는 대신 CSS 변환 속성을 사용하는 또 다른 접근 방식이 있을 수 있습니다.
으아악slideAnimation 키프레임은 TranslateX를 사용하여 이미지를 왼쪽에서 오른쪽으로 이동합니다. 이미지는 화면(-100%)에서 시작하여 화면 오른쪽(100%)으로 이동합니다. 오버플로: .row-1 클래스를 숨기면 애니메이션으로 인한 가로 스크롤을 방지할 수 있습니다.
원치 않는 스크롤을 유발하지 않고 원하는 효과를 얻을 수 있습니다