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()などが用意されています。

関連記事

  1. Jquery progress indicator on page scroll
  2. raccordion

    JavaScript

    レスポンシブにも対応!アコーディオンのイメージスライダーを実装できるjQueryプラグイン「racc…

    レスポンシブにも対応しているjQueryプラグインのアコーディオンのイ…

  3. Woco Accordion jQuery plugin
  4. jQuery Responsive Thumbnail Gallery Plugin

    JavaScript

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQuery Responsive T…

    レスポンシブなサムネイル付きのイメージギャラリーを実装できる「jQue…

  5. jQueryプラグインで実装できるカレンダー

    JavaScript

    jQueryプラグインで実装できるカレンダー10選

    jQueryプラグインで実装することができる10個のカレンダーがCod…

  6. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP