[JS]かっこいいアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアル

かっこいいスライドやフェードのアニメーションを取り入れたポートフォリオギャラリーを実装するjQueryのチュートリアルを紹介します。

デモのキャプチャ

Animated Portfolio Gallery with jQuery
デモページ

[ad#ad-2]

左側のサムネイルをクリックすると、前のコンテンツをフェードアウトし、次のコンテンツがオーバーレイで表示し、スライドのアニメーションで表示します。

デモのキャプチャ

デモページ(クリック時のキャプチャ)

元記事では、HTML, CSS, JavaScriptの全コードの解説をはじめ、全ファイルのダウンロードも用意されています。

スクリプトのオプションでは、フェードやアニメーションのスピード、アニメーションの種類などが調整できます。

[ad#ad-2]

また、左側のサムネイルのスクロールに使用されているのは、「jquery thumbnail scroller」です。

サイトのキャプチャ

jquery thumbnail scroller

sponsors

top of page

©2018 coliss