AnimatedSlideNav

JavaScript

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

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

AnimatedSideNav

デモ

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

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

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

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

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

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

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

AnimatedSideNav

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

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

関連記事

  1. JavaScript

    シンプルでスタイリッシュなLightbox風のjQueryプラグイン「Featherlight」

    シンプルでスタイリッシュなデザインが特徴的なLightbox風のjQu…

  2. Simple Modal

    JavaScript

    レスポンシブ対応の軽量・シンプルなモーダル「Simple Modal」

    Simple Modalはレスポンシブに対応した軽量でシンプルなモーダ…

  3. Text Rotator
  4. PIGNOSE Calendar

    JavaScript

    美しくてシンプルに使えるデートピッカー実装「PIGNOSE Calendar」

    PIGNOSE Calendarは、美しくてシンプルな操作性によるデー…

  5. Holmes

    JavaScript

    ページ内で特定のテキストを高速に検索してくれるライブラリ「Holmes」

    Holmesは、ページ内部を簡単にかつ高速に検索してくれるライブラリで…

  6. ContentTools

    JavaScript

    画面内でそのまま編集できるWYSIWYGエディタ「ContentTools」

    ContentToolsは画面内でそのままコンテンツを編集できるWYS…

最近の記事

  1. ハンガリー産 純粋アカシアはちみつ
  2. COMOLI ダブルレイヤー L/Sクルー
  3. メキシコ オアハカ
  4. ドリップ
  5. チェリー

アーカイブ

PAGE TOP