순수한 CSS로 무한 자동 스크롤 애니메이션 만들기

이 가이드는 JamStack과 같은 웹사이트에서 볼 수 있는 무한 자동 스크롤 애니메이션의 개념과 CSS만으로 구현하는 방법을 이해하는 데 도움을 주기 위한 것입니다.

🤨 이 애니메이션은 정확히 무엇입니까?

JamStack과 같은 일부 웹사이트를 열면 JamStack과 호환되는 프레임워크를 보여주는 애니메이션이 표시되며, 다른 일부 웹사이트에서도 이 멋진 애니메이션을 사용하여 고객 리뷰, 스폰서, 평가 등을 보여줍니다.

그 뒤에 개념? 💻

이 애니메이션이 어떻게 작동하는지 이해하기 위해 애니메이션을 조금 분해해 보겠습니다. 단순히 화면 전체에서 요소에 애니메이션을 적용하는 것입니다. 이를 달성하려면 부모 요소에 overflow: hidden 가 있어야 하므로 요소가 애니메이션으로 표시될 때 숨겨진 상태로 유지됩니다.

애니메이션 요소 구조화 🏛

CSSleft 속성으로 애니메이션을 적용할 것이기 때문에 부모 요소position: relative를 width: 100vw와 같은 개별 너비로 만들고 자식 요소position: absolute를 width: inherit로 만듭니다. 애니메이션은 단순히 left: 0% 에서 left: -100% 로 요소를 이동하는 것과 관련되며, 이렇게 하면 전체 요소가 뷰포트에서 떨어져 애니메이션됩니다.

.scroll-parent {
  position: relative;
  width: 100vw;
  height: 20rem;
  overflow-x: hidden;
}

.scroll-element {
  width: inherit;
  height: inherit;
  position: absolute;
  left: 0%;
  top: 0%;
  animation: primary 3s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

이것은 우리에게..



무한대로 보이지 않습니까 😬? 무한대로 보이도록 초기 자식 요소 바로 옆에 자식 요소의 복제본을 추가하여 left: 100% 에서 left: 0% 로 이동합니다.
이 두 번째 하위 요소에 대해 다른 요소keyframe를 생성하고 이를 secondary라고 지정한 다음 키프레임에 대한 클래스를 생성합니다.

.primary {
  animation: primary 3s linear infinite;
}

.secondary {
  animation: secondary 3s linear infinite;
}

@keyframes primary {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}

@keyframes secondary {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

그런 다음 HTML 코드를 다음과 같이 구성합니다.

<div class="scroll-parent">
    <div class="scroll-element primary">
     ...
    </div>
    <div class="scroll-element secondary">
     ...
    </div>
</div>

그리고 그게 다야!

어떻게 작동합니까? 🤔

우리는 단순히 화면에서 두 개의 유사한 요소를 애니메이션화하고 있습니다. 두 개를 사용하는 이유는 하나가 떠날 때 다른 하나가 간격을 메울 것이기 때문입니다. 예를 들어 첫 번째 요소는 width로 나가고 두 번째 요소는 animation-duration로 들어갑니다.
left: -20% 의 사용에 주목하십시오. 이것은 애니메이션이 반복되도록 하기 위한 것입니다. 애니메이션이 완료되면 두 번째 요소를 첫 번째 요소로 교체하여 환상이 만들어지고 정확히 동일하기 때문에 애니메이션이 쪽으로 이동하는 것처럼 보입니다. 무한히 왼쪽 방향.

읽어주셔서 감사합니다 🙏🏾, 질문이나 추가, 빼기가 있으면 아래에 댓글을 달아주세요.

전체 소스 코드는 아래에 링크되어 있습니다 👇👇

다미스단디 / CSS 애니메이션 자동 스크롤

순수한 CSS를 사용한 무한 자동 스크롤 애니메이션