AnimatedSlideNav

JavaScript

動きがオシャレなアニメーションのサイドナビゲーション「AnimatedSideNav」

AnimatedSideNavは、動きがオシャレなアニメーションによるサイドナビゲーションバーを実装することができます。jQueryとTweenMax(GSAP)が使われているのが特徴です。

AnimatedSideNav

デモ

デモページでは画面右端に縦長のサイドナビゲーションバーが設置されています。ナビゲーションの各メニューにマウスオーバーすると、バーの横にメニュー項目の名前がアニメーションつきで表示されます。

各項目をクリックすると、それに応じた位置へスクロール移動します。シングルページやランディングページなどの縦長のページに活用したくなるナビゲーションですね。

各メニューに応じたコンテンツの位置にスクロールで移動してくれますが、ナビゲーションバーは固定されたままなので、どこにいてもすぐに好きな位置へアクセスできるのがグッドです。

スクロールするのがしんどい縦長ページにはピッタリの機能といえそうです。

また、デモページではナビゲーションバーが右端に設置されていますが、オプションで左に設定することも可能です。

そのほか、テーマカラーやテキストカラーなどといったオプションも指定することができます。

滑らかなアニメーションによるオシャレなサイドナビゲーションバーを実装したい人は、ぜひAnimatedSideNavをチェックしてみてはいかがでしょうか?

AnimatedSideNav

FlurryWebページに雪を美しく降らせる冬にピッタリのjQueryプラグイン「Flurry」前のページ

テキストを自動スクロールできる「jquery.autoscroll-text-tape」次のページjquery.autoscroll-text-tape

関連記事

  1. jQuery RS Carousel

    JavaScript

    レスポンシブ対応のシンプルなカルーセルを実装できる「jQuery RS Carousel」

    レスポンシブ対応のシンプルなカルーセルを実装できるjQueryプラグイ…

  2. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

  3. Jquery Toast Plugin

    JavaScript

    高いカスタマイズ性を備えたトースト通知を実装できる「Jquery Toast Plugin」

    Jquery Toast Pluginは高いカスタマイズ性を備えたアニ…

  4. jR3DCarousel

    JavaScript

    レスポンシブな3Dカルーセルを実装できる「jR3DCarousel」

    jR3DCarouselはレスポンシブな3Dカルーセルを実装できるjQ…

  5. vDrop

    JavaScript

    選択ボックスの選択肢をドロップダウンリストで表示できる「vDrop」

    vDroppは、選択ボックスの選択肢をドロップダウンリストで表示してく…

  6. Zebra_Tooltips

    JavaScript

    シンプルでスマートなツールチップを実装できる「Zebra_Tooltips」

    Zebra_Tooltipsは軽量でシンプルなツールチップを実装できる…

最近の記事

  1. JOK-350 WH
  2. 1460 COLLAR ウォータープルーフ 8ホールブーツ
  3. スターバックス ハウスブレンド

アーカイブ

PAGE TOP