loader image

CSSのみで画像を自動で無限スクロールするアニメーションの作り方

ブログ編集部 105 view

こんにちは、今回はJavascriptを使用せず画像を自動横スクロールするサンプルコードをご紹介したいと思います。

ではさっそくどうぞ。

ライブデモ

ますはデモを紹介します。

自動で画像がスクロールされ、ホバーするとスクロールが停止するようになっています。

動作を確認してみてください。

デモ1 左にスクロール

See the Pen Untitled by TMあさ (@TM-the-styleful) on CodePen.

デモ2 右にスクロール

See the Pen 自動横スクロール右へ by TMあさ (@TM-the-styleful) on CodePen.

サンプルコード

ではさっそく実装するためのサンプルコードをご紹介します。

HTMLサンプルコード

<div class="scroll_portfolio">
   <div class="scroll_portfolio_wrap scroll_portfolio_wrap--hover">
       <ul class="scroll_portfolio_list scroll_portfolio_list--right">
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
       </ul>
       <ul class="scroll_portfolio_list scroll_portfolio_list--right">
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
           <li class="scroll_portfolio_item"><img decoding="async" src="/sample.png" alt=""></li>
       </ul>
   </div>
</div>

CSS (左にスクロール) サンプルコード

@keyframes infinity-scroll-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-100%);
  }
}
_:-ms-lang(x)::-ms-backdrop,
.scroll_portfolio {
  display: -ms-grid;
  overflow: hidden;
}
.scroll_portfolio {
    margin-top: 48px;
}
.scroll_portfolio_wrap {
  display: flex;
  overflow: hidden;
}
.scroll_portfolio_list {
  display: flex;
  list-style: none;
}
.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}
.scroll_portfolio_item {
  width: 220px;
  margin: 0 8px;
}
.scroll_portfolio_item > img{
   width: 100%;
}

.scroll_portfolio:hover .scroll_portfolio_list {
  animation-play-state: paused;
}

@media screen and (max-width: 767px) {
  .scroll_portfolio_item {
  width: 180px;
  margin: 0 8px;
  }
}

CSS （右にスクロール) サンプルコード

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0%);
  }
}
_:-ms-lang(x)::-ms-backdrop,
.scroll_portfolio {
  display: -ms-grid;
  overflow: hidden;
}
.scroll_portfolio {
    margin-top: 48px;
}
.scroll_portfolio_wrap {
  display: flex;
  overflow: hidden;
}
.scroll_portfolio_list {
  display: flex;
  list-style: none;
}
.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}
.scroll_portfolio_item {
  width: 220px;
  margin: 0 8px;
}
.scroll_portfolio_item > img{
   width: 100%;
}

.scroll_portfolio:hover .scroll_portfolio_list {
  animation-play-state: paused;
}

@media screen and (max-width: 767px) {
  .scroll_portfolio_item {
  width: 180px;
  margin: 0 8px;
  }
}

コード解説

HTMLコード解説

HTMLについては並べたい画像に置き換えてください。

CSSコード解説

動きやデザインについてはCSSを編集します。

.scroll_portfolio_list--right{
animation :infinity-scroll-right 24s infinite linear 2s both;
}

このコードの24sの部分を変更するとスクロールのスピードが変わります。

数値が大きい方がスクロールのスピードが遅くなります。

.scroll_portfolio:hover .scroll_portfolio_list {
  animation-play-state: paused;
}

この部分を削除すればホバー時にスクロールが停止する機能を削除できます。

.scroll_portfolio_item {
  width: 220px;
  margin: 0 8px;
}
@media screen and (max-width: 767px) {
  .scroll_portfolio_item {
  width: 180px;
  margin: 0 8px;
  }
}

このコードで表示する画像のサイズをデスクトップとスマホで切り替えています。

widthの部分をお好みに合わせて変更してください。

まとめ

いかがでしたでしょうか。

昔はJavascriptga必要だったアニメーションがCSSのみで実装できてしまいます。

汎用性も高いと思うので、皆さんもぜひ使ってみてください。

集客できるホームページを私たちと作りませんか？😊

ホームページ制作やWEB集客に何かお悩みをお持ちでしたら、お気軽にお問い合わせください。👌

今はまだ発注するか決めていなてもまったく問題ありません。🙆

お問い合わせ
戻る

こちらもおすすめです