jquery-scrollstop

JavaScript

スクロールの開始・終了時のイベントを設定できる「jquery-scrollstop」

jquery-scrollstopはスクロールの開始・終了時のイベントを設定することができるjQueryプラグインです。スクロール中に実行したいもの、またはスクロールされていない時に実行したいものを自由にセッティングできるのがいいですね。

jquery-scrollstop

デモ

デモではスクロールがスタートされ(スクロール中)るとテキストカラーが変更される他、画面上部に「SCROLLING PAGE」という文字が固定表示されます。

そしてスクロールをストップするとテキストカラーが変更され、「SCROLLING PAGE」という文字は非表示になります。

使い方はこんな感じでスクロール開始時と終了時に実行したい動作を設定してあげます。

$(window)
    .on("scrollstart", function() {
        $(document.body).css({background: "yellow"});
    })
    .on("scrollstop", function() {
        $(document.body).css({background: "green"});
    })

応用次第で様々な動作を加えることができそうですね。

というわけで、スクロールの開始・終了イベントを設定できる「jquery-scrollstop」のご紹介でした。

jquery-scrollstop

常用漢字筆順辞典読み方がわからない漢字を手書きで調べれるiPhoneアプリ「常用漢字筆順辞典」前のページ

クロスブラウザ対応の軽量なカラーピッカー実装のjQueryプラグイン「Tiny Colorpicker」次のページTiny Colorpicker

関連記事

  1. jfMagnify
  2. Accessible Dialog

    JavaScript

    ナビゲーションメニューをモーダルダイアログで表示する「Accessible Dialog」

    Accessible Dialogは、ナビゲーションメニューをモーダル…

  3. Responsive Nav

    JavaScript

    レスポンシブ対応の軽量なナビゲーションを実装できる「Responsive Nav」

    レスポンシブ対応のナビゲーションを実装できる「Responsive N…

  4. Shuffle Letters

    JavaScript

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグイン「Shuffle Lett…

    テキストをカシャカシャとシャッフルさせて表示していくjQueryプラグ…

  5. CSS Emoticons
  6. JavaScript

    値を指定することで好きなカラースウォッチを表示できるjQueryプラグイン「Color Swatch…

    これはどこかで使いたくなるjQueryプラグインですね。カラー値を指定…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP