自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア

自動で途切れなくエンドレスにスライドし続けるCSSだけでつくるギャラリーのアイディア
このエントリーをはてなブックマークに追加
PR

CSS Animated Banner

DEMO 表示

デモは、リンク先に行くと止まること無く動いています

 

 

jQueryプラグインのスライダーとかで、自動で動くエンドレスなスライダーを

実装することが多々有りますが

こちらの方法は、javascriptを使わずにCSSのみで

エンドレスに途切れずに流れるスライダーを実現しています

また背景と、画像がパララックスに動いているのも良い

 

写真の画像はCSSで、CSSスプライトとして複数の画像をまとめた1枚の画像から

background-position で当てはめています

 

重要なポイント

エンドレスに流れているのは

同じものを2つ作り、それを交互に流すことで

一つのロールがエンドレスに回っているかのように表現しています

それぞれの画像が連続的に流れるように、ディレイで時間差で動いている

 

HTMLの部分をみれば、一目瞭然なんですが

ulを複製した形になっている

ちょっと無駄が多い感じにも見えますが、ポイントは2つをうまく連続的に流すアイディアです

また写真と背景の流れる速度を変えることでパララックス効果を与えている点

 

単なる画像を流すだけなら

背景と、その他の2枚の画像にしてやれば、HTMLもCSSももっとシンプルに出来るし

CSSスプライトを使って background-position でちまちま設置するよりも

シンプルで簡単かなと思います

 

 

HTMLで li で細かく分けているのは

それぞれの画像にaタグをつけて、リンク化を考えてのようです

 

 

コードをファイル形式でダウンロード

DOWNLOAD
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)