옆으로 흐르는 무한 스크롤 배너 만들기

 

원리는 이곳에서..!!!

 

https://www.damiisdandy.com/articles/create-infinite-auto-scroll-animation-with-pure-css/

Create infinite auto-scroll animation with pure CSS

 

전체소스

 

.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;
}
.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%;
  }
}





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