【CSS】垂直スライダーループを実装


#垂直スライダーループを実装

```html:html
    </div>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/a/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/b/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/c/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/d/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/e/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/f/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/g/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/h/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/i/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/j/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/k/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/l/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/a/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/b/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/c/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/d/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/e/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/f/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/g/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/h/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/i/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/j/350/480" alt />
        </li>
        <li class="main-roop-items">
            <<img src="https://picsum.photos/seed/k/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/l/350/480" alt />
        </li>
    </ul>
</div>
```

```css:css
html,
body {
  overflow: hidden;
}

.main {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.575);
  position: relative;
  &-tll {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
    font-weight: bold;
    color: gray;
    background-color: aliceblue;
    border-radius: 2rem;
    position: absolute;
    top: 40%;
    left: 10%;
    padding: 2rem;
    box-shadow: 0 0 10px lightgrey;
    width: 80%;
  }
  .btn-orange,
  a.btn-orange {
    color: #fff;
    background-color: #eb6100;
    padding: 10px;
    margin-top: 1rem;
    border-radius: 1rem;
    text-decoration: none;
  }
  .btn-orange:hover,
  a.btn-orange:hover {
    color: #fff;
    background: #f56500;
  }
  &-roop {
    width: 100%;
    height: 68vh;
    display: flex;
    opacity: 0.6;
    &-items {
      animation: loop 20s -10s linear infinite;
      backface-visibility: hidden;
      will-change: transform;
      width: 100%;
      overflow: hidden;
    }
  }
}

img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes loop {
  0% {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-300%);
  }
}
```

#ポイント

HTMLの方で同じ画像を2回繰り返すということです。

以下**main-roop**タグを3つ作成しておりますが、それをコピーして後ろに同じものを挿入します。

```html:html
<ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/a/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/b/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/c/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/d/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/e/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/f/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/g/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/h/350/480" alt />
        </li>
    </ul>
    <ul class="main-roop">
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/i/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/j/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/k/350/480" alt />
        </li>
        <li class="main-roop-items">
            <img src="https://picsum.photos/seed/l/350/480" alt />
        </li>
    </ul>
```


上記、もとが3つの為、**translateY(-300%);**にして、
**animation: loop 20s -10s linear infinite**すると途切れずにループします。
※animationの詳細につきましては、お好みで調整してください。

```css:css

&-items {
      animation: loop 20s -10s linear infinite;
      backface-visibility: hidden;
      will-change: transform;
      width: 100%;
      overflow: hidden;
    }

@keyframes loop {
  0% {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-300%);
  }
}
```