AnimatedSlideNav

JavaScript

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

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

AnimatedSideNav

デモ

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

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

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

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

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

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

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

AnimatedSideNav

関連記事

  1. Material ScrollTop Button
  2. jumboShare

    JavaScript

    SNSシェアボタンとジャンボサイズのカウンターを設置できる「jumboShare」

    jumboShareはSNSのシェアボタンとジャンボサイズのカウンター…

  3. Spring Loaders

    JavaScript

    ポリゴンによるローディングアニメーションがかっこいい「Spring Loaders」

    Spring Loadersはポリゴンでつくられたローディングアニメー…

  4. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

  5. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQuery(JavaScript)で指定した要素の子要素数や最大文字数を配列内から取得する

    jQueryで指定した要素の子要素の数やその文字数、文字なんかを配列に…

  6. Text Rotator

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP