JavaScript

2つの異なるスクロール動作が印象的なjQueryプラグイン「multiscroll.js」

multiscroll.jsというおもしろいjQueryプラグインがあったのでご紹介します。2つの異なるスクロール動作がとても印象的でした。左右に分かれたパネルが同時に上下逆方向に移動しながらページが切り替わっていきます。ダイナミックにページを切り替えたい時に活用してみたいです。

[ads_center]

multiscroll.jsの使い方

multiscroll.js

デモ

上記から実際のデモを確認することができます。

jQuery本体やプラグインといった動作に必要なファイルをhead内に読み込んだ状態で、以下のようにHTMLをマークアップします。左と右のパネルを別々に分けて記述していきます。

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
        <div class="ms-section">Some section</div>
    </div>
</div>

あとはmultiscroll.jsを呼び出してあげればOKです。

$(document).ready(function() {
    $('#multiscroll').multiscroll();
});

multiscroll.js

関連記事

  1. scrollUp

    JavaScript

    スクロールしていくと先頭に戻るボタンを表示してくれるjQueryプラグイン「scrollUp」

    下へスクロールしていくと、先頭に戻るボタンを表示してくれるjQuery…

  2. Product Tour

    JavaScript

    レスポンシブなプロダクトツアーを実装できるCSS・jQuery「Product Tour」

    Product Tourはレスポンシブに対応したプロダクトツアーを実装…

  3. OneBook3d

    JavaScript

    フォトアルバム(ブック)に最適なjQueryプラグイン「OneBook3d」

    OneBook3dはブラウザ上でフォトアルバム(ブック)を作るのにとて…

  4. JavaScript

    タッチ、フリック、レスポンシブ対応のスライダーギャラリー「Flickity」

    Flickityはスマフォやタブレットに最適なタッチやフリック、または…

  5. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  6. Typed.js

    JavaScript

    プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

    Typed.jsは、プログラムを入力するように文字をタイプしてくれるエ…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP