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. PWS Tabs jQuery Plugin
  2. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  3. nanogallery2

    JavaScript

    美しくてハイクオリティなイメージギャラリーを実装できる「nanogallery2」

    nanogallery2はパーソナルニーズにピッタリなイメージギャラリ…

  4. sidebar-nav

    JavaScript

    ツリー型のサイドナビゲーションを実装できる「sidebar-nav」

    sidebar-navはツリー型でレスポンシブに対応したサイドナビゲー…

  5. JavaScript

    縦スクロールすると横スクロール(水平移動)していくjQueryプラグイン「jInvertScroll…

    これおもしろいですね。縦スクロールすると垂直に移動していくのではなくて…

  6. CSS Jquery Pie Countdown Timer

    JavaScript

    グラデーションが美しい円形カウントダウン「CSS Jquery Pie Countdown Time…

    円形によるカウントダウンのタイマーを実装する「CSS Jquery P…

最近の記事

  1. 広尾 スタバ
  2. 芳醇な香りのラムレーズンサンド
  3. Aモーニングセット
  4. 白トリュフの塩パンやメロンパンなど
  5. 東京都現代美術館

アーカイブ

PAGE TOP