Optiscroll

JavaScript

縦横に対応したカスタマイズ性に優れたモダンなスクロールバー「Optiscroll」

Optiscrollは、軽量で高度に最適化されたカスタマイズ性に優れたモダンなスクロールバーを実装できるJSライブラリです。9KBととっても軽いのがうれしいですね。縦横スクロールバーに対応しているほか、すべてのモダンブラウザ(IE9以上)をサポートしています。オプションもいろいろ用意されていたり、scrollToやscrollIntoViewといったアニメーションの設定も可能です。

カスタムイベントやAPIによるアニメーション

デモ

デモではシンプルなスクロールバーから、あらかじめスクロールバーを表示しているもの、縦横のスクロールバーを表示するものなど、いくつかの種類が用意されています。

scrollTo ( destX, destY [, duration] )、scrollIntoView (elem, [, duration, delta] )といったAPIを使用したアニメーションを設定することもできます。自分が指定した特定のポイントまでスクロールしてくれるので、コンテンツ内で特定の部分を効率よく見せたいときなんかに活用できそうですね。

カスタムイベントには、sizechange、scrollstart、scroll、scrollstop、scrollreachedgeなどが用意されているので、自サイトに合わせてカスタマイズしたい人にも最適です。

ほかにも、preventParentScroll、forceScrollbars、scrollStopDelay、maxTrackSize、minTrackSize……など、多彩なオプションが揃っています。

Optiscroll

jquery.adaptive-backgrounds.js画像にマッチした背景色を配色してくれる「jquery.adaptive-backgrounds.js」前のページ

スクロールの位置をベースにしたアニメーション「ScrollTrigger」次のページScrollTrigger

関連記事

  1. jQuery Sidebar

    JavaScript

    上下左右からクイックなスライド表示させることができるjQuery Sidebar

    jQuery Sidebarは上下左右からスライド表示させることができ…

  2. Tipso

    JavaScript

    レスポンシブでアニメーションもいい感じのツールチップのjQueryプラグイン「Tipso」

    Tipsoはレスポンシブに対応した軽量でアニメーションもいい感じのツー…

  3. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  4. gridslide.js

    JavaScript

    いろんな方向に画像をスライドできるjQueryイメージスライダー「gridslide.js」

    gridslide.jsはいろんな方向に画像をスライドさせることができ…

  5. Basic Metro Dynamic jQuery Tab Menu
  6. Ziehharmonika

    JavaScript

    かっこいいアコーディオンを実装できる軽量のjQueryプラグイン「Ziehharmonika」

    アニメーションがとてもクールでかっこいいアコーディオンを実装することが…

最近の記事

  1. パニーニ(フォカッチャ ベーコンときのこのゴルゴンゾーラクリーム)とエスプレッソ
  2. 広尾 スタバ
  3. 芳醇な香りのラムレーズンサンド
  4. Aモーニングセット
  5. 白トリュフの塩パンやメロンパンなど

アーカイブ

PAGE TOP