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