no-image

JavaScript

スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

jQuery.panelSnapは、コンテンツごとに縦に並べられたパネルのページをスクロールした時に、自動で最適な位置に合わせてくれるjQueryプラグインです。スクロールしてコンテンツの位置がズレてた場合、自動的に位置を修正してくれるのでとても便利ですね。

jQuery.panelSnap

デモ

デモではコンテンツがパネルごとに縦に並んでいます。例えば、下へスクロールしていった時にパネルとパネルの間の中途半端な位置に止まってしまった場合、自動的に最適な位置まで移動してくれます。

パネルごとにコンテンツを分けて縦に並べたWebページを作りたい時には、とても役立つ機能になるのではないでしょうか。

デモページには、メニュー、キーボード、NEXT・PREVボタン、コールバック、イベント、オフセットと、いろんなパターンのサンプルが用意されています。

また、jQuery.panelSnapにはオプションもいろいろあり、menuSelector、panelSelector、namespace、directionThreshold、slideSpeed、delay、easing、offset、navigationなどカスタマイズして使用したい場合にもピッタリです。

マークアップもシンプルで使いやすそうなので、気になる人はぜひチェックしてみてください。

jQuery.panelSnap

関連記事

  1. jQuery Tabs with Content Overlays
  2. Product Builder

    JavaScript

    カスタマイズ性に優れたオンラインストアに役立つ「Product Builder」

    Product Builderは、カスタマイズ性に優れたオンラインスト…

  3. Dependent / Cascading Select List with jQuery Select2

    JavaScript

    選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading S…

    セレクトボックスを強力でカスタマイズ性が高く、そして充実させる人気のj…

  4. iziModal

    JavaScript

    エレガント・レスポンシブ・フレキシブルでそのうえ軽量なモーダルウィンドウ「iziModal」

    iziModalはエレガント・レスポンシブ・フレキシブルなモーダルウィ…

  5. jquery.confirm

    JavaScript

    jQueryとBootstrapを使ったボタンとリンクによるダイアログ実装「jquery.confi…

    jquery.confirmは、ページ内のボタンやリンクをクリックする…

  6. SpriteSpin

    JavaScript

    タッチにも対応した360度ビューを実装できるjQueryプラグイン「SpriteSpin」

    SpriteSpinはプロダクトページなどで役立つ、360度ビューを実…

最近の記事

  1. TAP-F27-2KP
  2. M32ミニ
  3. CITTA TT5.0
  4. Kindle Oasis

アーカイブ

PAGE TOP