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

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

デモのキャプチャ

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

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

デモのキャプチャ

元の状態

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

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

sponsors

top of page

©2024 coliss