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

Remodalレスポンシブ対応のお洒落なモーダルウィンドウを実装できるjQueryプラグイン「Remodal」前のページ

レスポンシブ対応の2カラムWordPressテーマ「Hemingway」次のページHemingway

関連記事

  1. Popper.js

    JavaScript

    軽量で見やすいツールチップを実装できる「Popper.js」

    Popper.jsはユーザーにとって見やすいツールチップを実装できるJ…

  2. underline.js

    JavaScript

    遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

    underline.jsはアニメーションが付いた美しいアンダーラインを…

  3. SMINT

    JavaScript

    1ページだけのWebサイトに最適なスクロール移動できるナビゲーションを実装できるjQueryプラグイ…

    1ページだけのWebサイトを作る際にとても役立ちそうですね。ナビゲーシ…

  4. JK Responsive Youtube Video and Image Gallery
  5. no-image

    JavaScript

    フォームに文字制限を設定できるjQueryプラグイン「Character Limit」

    Character Limitは、フォーム要素に文字制限を設定するため…

  6. bringins

    JavaScript

    コンテンツをかっこいいアニメーションページで魅せるjQueryプラグイン「bringins」

    bringinsはWebページ上のコンテンツを、アニメーションページと…

最近の記事

  1. OWL-LPB6701LA
  2. cheero Power Mountain mini 30000mAh CHE-110
  3. 帆布カメラインナーケース B-2タイプ

アーカイブ

PAGE TOP