X
    Categories: CSSHTML

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

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

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

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

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

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

View Comments (1)

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