CSS로 무한 스크롤 애니메이션 만들기 💥

일부 로고가 있는 웹사이트에서 무한 자동 스크롤 애니메이션을 본 적이 있을 것입니다. 이 스크롤 애니메이션은 정말 좋아 보입니다. 그럼 우리가 어떻게 할 수 있는지 봅시다



내부에 6개의 div가 있는 컨테이너 만들기

<div class="container">
  <div class="pink"></div>
  <div class="blue"></div>
  <div class="yellow"></div>
  <div class="orange"></div>
  <div class="purple"></div>
  <div class="aqua"></div>
</div>

컨테이너에 간단한 스타일을 추가하고 div에 너비, 높이 및 다양한 색상을 지정합니다. 여기에서 이미지를 가질 수도 있습니다.

.container {
  overflow: hidden;
  display: flex;
  height: 500px;
  width: 1500px;
  margin: 0 auto;
}

.container div {
  height: 400px;
  min-width: 300px;
  margin-left: 100px;
}

.pink {
  background-color: pink;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: orange;
}

.purple {
  background-color: purple;
}

.aqua {
  background-color: aqua;
}

키프레임 추가 -

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1500px, 0, 0); /* The image width */
  }
}

컨테이너에서 키프레임 애니메이션 사용

.container div {
  height: 400px;
  min-width: 300px;
  margin-left: 100px;
  animation: slide 15s linear infinite;
}

짜잔, 작동시키는 것은 이렇게 간단했습니다!

https://www.loom.com/share/a2339e51fcf942a99de46264190e3c94

이 미니 튜토리얼이 마음에 드셨기를 바랍니다. 다음 튜토리얼에서 만나요 ✌🏻

유용한 링크-

Code

Social links