スクロールスパイ系js10個まとめ

スクロールに合わせて、ナビゲーションをアクティブにしたいライブラリを探してみると、たーくさんあったので、メモ。
探せばどんだけでも出てくる感じだけど、自分の求めている物になかなか辿り着けない。。

Swiper

http://idangero.us/swiper/
デモ:http://idangero.us/swiper/demos/

ScrollSpy

https://github.com/makotot/scrollspy
デモ:https://codepen.io/makotot/pen/YyRXOQ
サブメニューにも対応

VanillaJS ScrollSpy

https://github.com/ederssouza/vanillajs-scrollspy
デモ:https://www.cssscript.com/demo/scrollspy-smooth-scroll-library-scrollspy-js/

wall.js

http://nichenqin.com/wall.js/
https://github.com/nichenqin/wall.js
デモ:https://www.cssscript.com/demo/fullpage-scrolling-framework-vanilla-javascript-wall-js/
1ブロック1画面に収まらなくてもうまいこと処理してくれている。
プレゼンテーションWebページまたは1ページのスクロールWebアプリケーション用のスムーズな全ページスクロール効果を作成JavaScriptライブラリ

scrollmenu.js

https://github.com/denislins/scrollmenu
デモ:http://denislins.github.io/scrollmenu/

MenuSpy

https://github.com/lcdsantos/menuspy
デモ:http://leocs.me/menuspy/examples/sidemenu.html

Simple Scrollspy

https://github.com/huukimit/simple-scrollspy
デモ:https://huukimit.github.io/simple-scrollspy/demo/

Full page scroll without Jquery

https://github.com/almeida-matheus/fullPageScrollPureJS
デモ:https://www.cssscript.com/demo/cross-platform-smooth-one-page-scrolling-pure-javascript/#0
ネイティブなJavaScript / CSS実装、1ページスクロール効果

slide-nav

https://github.com/qmixi/slide-nav
デモ:https://qmixi.github.io/slide-nav/

Pure CSS One page vertical navigation

https://codepen.io/hrtzt/pen/pgXMYb (デモあり)

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL