no-image

JavaScript

要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」

snapScroll.jsは要素ごとにきりのいいところでスクロールされる軽量なjQueryプラグインです。ランディングページなどの縦長ページなどで重宝しそうな機能ですね。スナップ撮影するような感じで、コンパクトなコンテンツをサクサクとスクロールで見ていくことができます。

snapScroll.js

デモ

上下にスクロールすると、各要素ごとにきりのいい場所でスクロールがストップします。区切りよくコンテンツをチェックしていけるので、1ページにコンテンツをしっかり分割したい場合に最適です。

実装も簡単でマークアップもわかりやすいと思います。また、オプションにはarrowKeys、duration、easing、ordered、scrollBarなどといった項目が用意されています。デフォルト値はarrowKeysがfalse、durationが600、easingが’swing’、orderedがtrue、scrollBarがtrueです。ちなみにeasingはswingの他にlinearという値も設定可能です。

その他、コールバックにはonLeave(currentPoing, nextPoint)やonArrive(prevPoint, currentPoint)が、メソッドにはscrollPrev()、scrollNext()、scrollToPoint(targetPoint, newOptions)、crrentPoint()、enable()、disable()などが用意されています。

no-image豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」前のページ

固定表示される美しいソーシャルシェアバーを実装できる「jQuery Social Share Bar」次のページjQuery Social Share Bar

関連記事

  1. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

  2. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

  3. ad-datepicker

    JavaScript

    アクセシブルなデートピッカーを実装できる「ad-datepicker」

    ad-datepickerはアクセシブルなデートピッカーを実装できるj…

  4. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

  5. JavaScript

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Shadow Plugin

    指定したボックス要素にドロップシャドウをつけてくれるjQuery Sh…

  6. Filterable Product Grid

最近の記事

  1. スタバ ドリップコーヒー
  2. エチオピア
  3. 紗々 飴色和栗
  4. DCG-CA21
  5. Apple WatchでのMacロック解除を無効

アーカイブ

PAGE TOP