最近のスタートアップ企業のウェブサイトでよく見かける、企業ロゴがぐるぐる回っている無限ループスライドショー。
CSSの背景画像とCSSアニメーションを用いることでJSで実装すること無く実現できる。
要は背景画像の位置を徐々にずらしていくだけ。
結構色々なところで使えそうである。
デモに使用している背景画像 1518px × 160px
最近のスタートアップ企業のウェブサイトでよく見かける、企業ロゴがぐるぐる回っている無限ループスライドショー。
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です。