ScrollMenu.jsは通常の味気ないスクロールバーを便利で新しいインターフェースに変えることができます。縦や横に配置することができたり、ページ内のナビゲーションメニューとスクロールバーを統合させたりすることが可能です。
ScrollMenu.js
以下はScrollMenu.jsの実際のデモになります。
スクロールバーはコンテンツの数に合わせて分割されています。各コンテンツのカラーに合わせているので、自分が今どの辺にいるのか一目瞭然です。
これだけだと単に「オシャレなスクロールバー」なのですが、このプラグインのいいところはナビゲーションメニューも兼ねることができる点です。
スクロールバーにホバーするとこんな感じでメニュー項目が飛び出てきます。もちろんこれをクリックすることでその場所まで自動でスクロールされます。
上記は縦に並んだスクロールバーですが、他にも横配置やヘッダーメニューのようなものもあります。全部で6つのデモを見ることができます。
- Vertical Scroll Menu
- Horizontal Scroll Menu
- Horizontal Header Menu
- Creative Menu
- Horizontal Top Line
- Visible Browser Scrollbar
スクロールバーをナビゲーションっぽくすることでページ内の各コンテンツへのアクセスもしやすくなるので、縦長のページにはピッタリなプラグインですね。
というわけで、見た目もオシャレで便利なスクロールバーを実装できるScrollMenu.jsのご紹介でした。
