3Dに重ねて表示されたエレメントをクリックで最前に並び替えるコード 『Map portfolio』

WS002434
このエントリーをはてなブックマークに追加
PR

Map portfolio
By Stan Labouré

DEMO 表示

画面幅が狭いと動作を確認しにくいかと思います、リンク先で御覧頂いたら快適かと思います

 

3Dに整列されたDIV要素をクリックする事で手前に持ってくるものです
後ろに並ばされているものは、順序が維持されます

要素と連動して 右側の文字も入れ替わります

要素の数を増やすには、適当にDIVとSPANを増やすだけでは動かないようで調整する必要があります
CSSを幾つか追加と数値の修正で要素を増やすことが出来ます

HTMLの方はとてもシンプルです

 

ウェブサイトのヘッダー辺りに設置するのも良いかと思います

 

コード一式をダウンロード出来ます

Download Zip
PR

COMMENT

コメントを残す

PR

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

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

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

Twitter Facebook Google+ Feedly RSS

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