CSS3とjQueryでサムネイルをカッコよくイメージ拡大
本日はjQueryを使ってこざっぱりと綺麗にまとめられたサムネイルのプロキシミティ効果（接近効果）の作り方をご紹介したいと思います。これはマウスを画像にホバーすると自動拡大され、周辺画像もそれに合わせて適切なサイズに自動拡大されるというアイデアです。また同時に説明文も表示されるようになっています。 これは元々http://porscheeveryday.com/というサイトの効果をjQueryを使って実現出来るのかという読者からのリクエストに基づいており、この効果を私たちなりの方法で作り直したものです。 今回はJames Padolseyさんが作ったjQuery Proximity pluginを利用しています。 デモで使用しているイラストはFlorian Nicolleさんによるもので、Creative Commons Attribution-NonCommercial 3.0 Unported Licenseにライセンスされています。 この記事は、http://tympanus.net/codrops/ の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 デモへリンクオリジナルの記事 HTMLマークアップ 今回サムネイルにはULリストを使用し、各画像の説明文用にDIVタグを追加しています。（デモ２の画像をご覧ください。） それではこちらにスタイル設定を加えましょう。 CSSスタイリング ULリストはページ中央にセンタリングし、サムネイルの透明度が低いので「透けて見える」ような背景画像を追加します。 また疑似要素を使ってRGBA背景色を加えることにより、背景画像の色合いを増やしています。 リストアイテムは左側にフロートさせ、アンカーと画像のポジションは相対位置で設定しています。 サムネイルそれぞれは、幅１００ピクセル、透明度０．２で設定します。 説明部分はデフォルトでは非表示にし、JavaScriptを使って表示されるようにします。 最後に説明部分のDIVタグの設定をしましょう。 これでスタイル設定は完成です！つぎにJavaScriptを見てみましょう。 [adrotate group=”2″] JavaScript まず大切なのが、サムネイル画像をホバーした際の説明部分のポジションとサイズを計算することです。勿論サムネイル画像がメインラッパーのどこに配置されているかによって、またサムネイル画像が最大化した際のサイズによって異なってくるので注意が必要です。例えばサムネイル画像が右端に近かった場合、説明部分はサムネイル画像の左側に配置したいわけです。 それからプロキシミティイベントを画像にバインドする必要があります。マウスの位置によって画像を上下にスケーリングするということです。画像が最大化されたら、そのz-indexを高いまま維持します。そうすれば説明文をきちんと表示させることが出来ます。 デモ一覧 デモを3種類ご用意しましたので、どうぞご覧ください。 デモ１： サイズ変更のみ デモ２： サイズ変更と説明文 デモ３： 小さ目のサイズ変更と説明文
