ここで見ることができ、ここで- ダウンロード
以下の例では、ホバリング時に特定のCSS情報を表示するサムネイルを使用しています。 jQueryのおかげで画像にカーソルを合わせると、画像が最小化または曲がって表示されます。 これらの効果には、CSS 3D変換が使用されます。
HTMLマークアップ
これは、縮小された構造のマークアップになります。
<div id="grid" class="main"> <div class="view"> <div class="view-back"> <span data-icon="A">566</span> <span data-icon="B">124</span> <a href="http://www.flickr.com/photos/ag2r/5439506585/in/photostream">→</a> </div> <img src="images/1.jpg" /> </div> <div class="view"> <!-- ... --> </div> <!-- ... --> </div>
各サムネイルはコンテナ内にあります。 JavaScriptを使用して、ビューコンテナーから各セクションの構造を作成する必要があります。
<div class="view"> <div class="view-back"> <!-- ... --> </div> <div class="slice s1" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s2" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s3" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s4" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> <div class="slice s5" style="background-image: url(images/1.jpg); "> <span class="overlay"></span> </div><!-- /s5 --> </div><!-- /s4 --> </div><!-- /s3 --> </div><!-- /s2 --> </div><!-- /s1 --> </div><!-- /view -->
各部分には対応する画像があり、ネスト構造があるため、効果を制御できます。 さらに、効果をよりリアルにするオーバーレイが追加されます。
JavaScript関数は次のようになります。
$.fn.hoverfold = function( args ) { this.each( function() { $( this ).children( '.view' ).each( function() { var $item = $( this ), img = $item.children( 'img' ).attr( 'src' ), struct = '<div class="slice s1">'; struct +='<div class="slice s2">'; struct +='<div class="slice s3">'; struct +='<div class="slice s4">'; struct +='<div class="slice s5">'; struct +='</div>'; struct +='</div>'; struct +='</div>'; struct +='</div>'; struct +='</div>'; var $struct = $( struct ); $item.find( 'img' ).remove().end().append( $struct ).find( 'div.slice' ).css( 'background-image', 'url(' + img + ')' ).prepend( $( '<span class="overlay" ></span>' ) ); } ); }); };
それでは、一般的なスタイルの設定に移りましょう。
CSS
コンテナのスタイルをサムネイルで定義し、パースペクティブを追加します。
.view { width: 316px; height: 216px; margin: 10px; float: left; position: relative; border: 8px solid #fff; box-shadow: 1px 1px 2px rgba(0,0,0,0.05); background: #333; perspective: 500px; }
一部のパーツに3Dトランジションを追加します。
.view .slice{ width: 60px; height: 100%; z-index: 100; transform-style: preserve-3d; transform-origin: left center; transition: transform 150ms ease-in-out; }
画像がシフトされたときに開く説明の部分には、次のスタイルがあります。
.view div.view-back{ width: 50%; height: 100%; position: absolute; right: 0; background: #666; z-index: 0; }
スパン要素とリンク：
.view-back span { display: block; float: right; padding: 5px 20px 5px; width: 100%; text-align: right; font-size: 16px; color: rgba(255,255,255,0.6); } .view-back span:first-child { padding-top: 20px; } .view-back a { display: bock; font-size: 18px; color: rgba(255,255,255,0.4); position: absolute; right: 15px; bottom: 15px; border: 2px solid rgba(255,255,255,0.3); border-radius: 50%; width: 30px; height: 30px; line-height: 22px; text-align: center; font-weight: 700; } .view-back a:hover { color: #fff; border-color: #fff; }
スパン要素の前にあるアイコンには、Fontelloフォントが使用されます。 data-icon属性をスパンに追加する前に、出力前に擬似クラスを使用します。
.view-back span[data-icon]:before { content: attr(data-icon); font-family: 'icons'; color: #aaa; color: rgba(255,255,255,0.2); text-shadow: 0 0 1px rgba(255,255,255,0.2); padding-right: 5px; }
最初の部分を除くすべてが右に移動するはずです（ネストされた構造を思い出してください）。
.view .s2, .view .s3, .view .s4, .view .s5 { transform: translateX(60px); }
次に、背景画像の各部分に対応する背景位置を設定します。
.view .s1 { background-position: 0px 0px; } .view .s2 { background-position: -60px 0px; } .view .s3 { background-position: -120px 0px; } .view .s4 { background-position: -180px 0px; } .view .s5 { background-position: -240px 0px; }
オーバーレイでは、デフォルトは不透明度0になります。トランジションを追加し、ホバー時にCSSの不透明度レベルを変更します。
.view .overlay { width: 60px; height: 100%; opacity: 0; position: absolute; transition: opacity 150ms ease-in-out; } .view:hover .overlay { opacity: 1; }
画像の位置を修正し、z-indexを追加します。 また、3D変換をサポートしていないブラウザーの移行も追加します。
.view img { position: absolute; z-index: 0; transition: left 0.3s ease-in-out; }
ブラウザが3Dプロパティをサポートしていない場合は、次のコンテンツを含む追加のfallback.cssスタイルシートをダウンロードする必要があります。
.view { overflow: hidden; } .view:hover img { left: -85px; } .view div.view-back { background: #666; }
これにより、ホバーすると画像が左に移動します。 例を見てみましょう。
例
この例では、イメージの折りたたみ効果を作成する必要があります。 したがって、すべてのコンテナのパースペクティブとトランジションの値を調整します。
.view { perspective: 1050px; } .view div { transition: all 0.3s ease-in-out; }
2番目、3番目、4番目、5番目の部分は3Dで移動および回転し、ベンドエフェクトを作成します。
.view:hover .s2{ transform: translate3d(59px,0,0) rotate3d(0,1,0,-45deg); } .view:hover .s3, .view:hover .s5{ transform: translate3d(59px,0,0) rotate3d(0,1,0,90deg); } .view:hover .s4{ transform: translate3d(59px,0,0) rotate3d(0,1,0,-90deg); }
よりリアルなグラデーションをオーバーレイに追加します。
.view .s2 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0) 100%); } .view .s3 > .overlay { background: linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255, 255, 255, 0.2) 100%); } .view .s4 > .overlay { background: linear-gradient(right, rgba(0,0,0,0.6) 0%,rgba(0,0,0,0.2) 100%); } .view .s5 > .overlay { background: linear-gradient(left, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0) 100%); }
一部の詳細では、ホバーのサムネイルにもCSS画像の背景グラデーションがあります（画像から影をモデル化するため）。
.view div.view-back{ background: linear-gradient(left, #0a0a0a 0%,#666666 100%); }
画像は、 Creative Commons Attribution 2.0 Generic（CC BY 2.0）Licenseの下でライセンスされているAngeloGonzálezの厚意により提供されています。