13
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

cssのみで作る自動無限スクロールスライド

同じスライドを2つ並べている。一つ目のスライドはスライドが画面に表示されている状態から、画面から消えるまでスクロールする。二つ目は画面の外(ギリギリ見えない状態)から、一つ目のスライドの最初の状態までスクロールする。二つのスライドをこのように動かすことで無限ループに見せている。

DEMO

See the Pen infinite scroll by mk668a (@mk668a) on CodePen.

CODE

index.html
<div class="infinity-slide">
<!--   同じスライドを二つ表示 -->
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
    <div id="slide">
      <img src="https://cdn.pixabay.com/photo/2018/04/28/22/03/dawn-3358468_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/09/14/22/51/cobblestones-3678292_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2018/06/29/22/45/wheat-3506758_1280.jpg" />
      <img src="https://cdn.pixabay.com/photo/2017/01/20/00/30/maldives-1993704_1280.jpg">
    </div>
</div>
style.css
.infinity-slide{
  display: flex; /* 二つのスライドを横に並べる */
  width: 50vw;
  margin: 0 25vw;
  background: gray;
  overflow: hidden;
}

#slide {
  animation: infinity-loop 10s infinite linear 1s both; /* 無限ループアニメーションの設定 */
  display: flex; /* スライドの要素を横に並べる */
  width: 50vw;
  height: 100px;
  position: relative;
}

#slide img{
  height: 100%;
  width: auto
}

/* 無限ループアニメーション */
@keyframes infinity-loop {
  from {
    transform: translateX(0vw);
  }
  to {
    transform: translateX(-50vw);
  }
}

他にいい案があれば教えていただきたいですねええええ

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
13
Help us understand the problem. What are the problem?