AnimatedSlideNav

JavaScript

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

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

AnimatedSideNav

デモ

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

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

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

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

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

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

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

AnimatedSideNav

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

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

関連記事

  1. no-image
  2. no-image

    JavaScript

    画像の遅延読み込みを実装できる軽量のJavaScriptプラグイン「justlazy.js」

    justlazy.jsは画像の遅延読み込みを実装することができるJav…

  3. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  4. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

  5. Bootstrap Show Password
  6. Animated Heat Distortion Effects with WebGL

    JavaScript

    陽炎のような揺れを表現できる「Animated Heat Distortion Effects wi…

    夏の暑い日などによく見かける「陽炎」のようなエフェクトを実装することが…

最近の記事

  1. 200-DGBG020
  2. Anker PowerPort 5-in-1 37.5W Hub
  3. α7C + FE28-60mm F4-5.6
  4. Apple Watch Series 6
  5. iPad Air

アーカイブ

PAGE TOP