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. xGallerify

    JavaScript

    サイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」

    xGallerifyはギャラリーを作成するのに最適なjQueryプラグ…

  2. JavaScript

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

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

  3. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  4. Hero slider

    JavaScript

    レスポンシブで横幅フルサイズのスライダーを実装できる「Hero slider」

    Hero sliderはレスポンシブに対応した横幅フルサイズのスライダ…

  5. TextFit

    JavaScript

    テキストをコンテナ幅にすばやくフィットさせる「TextFit」

    TextFitは、一行または複数行のテキストをコンテナ幅(オプションに…

  6. Raindrops.js

    JavaScript

    水面に雨粒が落ちてくるエフェクトが素敵なjQueryプラグイン「Raindrops.js」

    Raindrops.jsは水面に雨粒が落ちてくる素敵なエフェクトを実装…

最近の記事

  1. 甘柿
  2. 冬用のふとん
  3. 田沢湖
PAGE TOP