[JS]画像拡大とキャプション表示をアニメーションで実装するチュートリアル

スムーズなアニメーションで画像が拡大し、キャプションがスライド表示されるギャラリーの実装するチュートリアルをtutsvalleyから紹介します。

Making A Cool Thumbnail Effect With Zoom And Sliding Captions
デモページ

デモでは画像のサムネイルにマウスをフォーカスすると、アニメーションで拡大表示され、キャプションが下方向からスライド表示されます。
デフォルト時は、下記のようになっています。

元の状態

ギャラリーの各画像とキャプションはリスト要素で実装されています。

スクリプトのベースにはjQueryが使用されており、アニメーション機能を実装しています。