自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア
PR
CSS Animated Banner
デモは、リンク先に行くと止まること無く動いています
jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを
実装することが多々有りますが
こちらの方法は、javascriptを使わずにCSSのみで
エンドレスに途切れずに流れるスライダーを実現しています
また背景と、画像がパララックスに動いているのも良い
写真の画像はCSSで、CSSスプライトとして複数の画像をまとめた1枚の画像から
background-position で当てはめています
重要なポイント
エンドレスに流れているのは
同じものを2つ作り、それを交互に流すことで
一つのロールがエンドレスに回っているかのように表現しています
それぞれの画像が連続的に流れるように、ディレイで時間差で動いている
HTMLの部分をみれば、一目瞭然なんですが
ulを複製した形になっている
ちょっと無駄が多い感じにも見えますが、ポイントは2つをうまく連続的に流すアイディアです
また写真と背景の流れる速度を変えることでパララックス効果を与えている点
単なる画像を流すだけなら
背景と、その他の2枚の画像にしてやれば、HTMLもCSSももっとシンプルに出来るし
CSSスプライトを使って background-position でちまちま設置するよりも
シンプルで簡単かなと思います
HTMLで li で細かく分けているのは
それぞれの画像にaタグをつけて、リンク化を考えてのようです
コードをファイル形式でダウンロード
DOWNLOAD
PR
短縮URL:
COMMENT