[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

最近のスタートアップ企業のウェブサイトでよく見かける、企業ロゴがぐるぐる回っている無限ループスライドショー。

CSSの背景画像とCSSアニメーションを用いることでJSで実装すること無く実現できる。

要は背景画像の位置を徐々にずらしていくだけ。

結構色々なところで使えそうである。

デモに使用している背景画像 1518px × 160px

デモに使用する背景画像

HTML

CSS

Run Result

1 thought on “[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー

  1. ONOCOM様、はじめまして。背景をスクロールする方法を探していてこちらにたどり着きました。
    すべてのキャリアに対応するために400フレームのアニメgifを用意したのですが、3Gスマホでの読み込みにやや難がありまして、JSではなくCSSでなんとかしたかったので試させていただきました。
    結果、PCではスムースに動いてくれましたが、スマホでは固定したままでした。
    こちらのページも私のスマホで確認してみるとスクロールしていません。一番左のブルー全幅から画面幅に収まる範囲が固定表示されています。ちなみにFujitsuのM10でアンドロイド4.4.2です。
    iPhoneやiPadではスクロールしてるんでしょうか?
    サンプルサイトURLはCSSテストページ、他のリンク先ページはアニメgifです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください