最近のスタートアップ企業のウェブサイトでよく見かける、企業ロゴがぐるぐる回っている無限ループスライドショー。
CSSの背景画像とCSSアニメーションを用いることでJSで実装すること無く実現できる。
要は背景画像の位置を徐々にずらしていくだけ。
結構色々なところで使えそうである。
デモに使用している背景画像 1518px × 160px
HTML
CSS
Run Result
1 thought on “[CSS]背景画像をアニメーションすることで簡単に作れる無限ループスライドショー”
コメントを残す
This site uses Akismet to reduce spam. Learn how your comment data is processed.
ＯＮＯＣＯＭ様、はじめまして。背景をスクロールする方法を探していてこちらにたどり着きました。
すべてのキャリアに対応するために400フレームのアニメgifを用意したのですが、３Gスマホでの読み込みにやや難がありまして、JSではなくCSSでなんとかしたかったので試させていただきました。
結果、PCではスムースに動いてくれましたが、スマホでは固定したままでした。
こちらのページも私のスマホで確認してみるとスクロールしていません。一番左のブルー全幅から画面幅に収まる範囲が固定表示されています。ちなみにFujitsuのM10でアンドロイド4.4.2です。
iPhoneやiPadではスクロールしてるんでしょうか？
サンプルサイトURLはCSSテストページ、他のリンク先ページはアニメgifです。