ページスクロールでダイナミックな切り替えエフェクトが楽しいコンテンツスライダー「multiScroll.js」

Divの切り替えが楽しいエフェクトのmultiScroll.js

http://alvarotrigo.com/multiScroll/

DIV 2つで、ページ全体を占領するスタイルのWEBサイトで

スクロール、もしくはナビゲーションを使ってダイナミックなアニメーションで移り変わるのを実現するプラグインです

DEMO 表示

左右がそれぞれ上下に逆に動いて、コンテンツが移り変わるエフェクトとなっています

ダイナミックにコンテンツが変わりゆく爽快感が有ります

ダウンロードはデモページ、もしくは GitHub からダウンロード出来ます

ライセンスはMITとなっています

http://alvarotrigo.com/multiScroll/

https://github.com/alvarotrigo/multiscroll.js#multiscrolljs

multiScroll.js の基本的な使い方

プラグインの準備

jquery.multiscroll.css | multiScriollのスタイル

jQuery 1.9.1以降 | jQuery 本体

jquery.easing.min.js | jQueryのアニメーション拡張プラグイン

jquery.multiscroll.js | multiScroll.js 本体

これらの 4つのファイルを読み込みます

jQuery のダウンロードはこちら

jQuery easing のダウンロードはこちら

headに書くと以下のようになります

それぞれのパスは環境に合わせてください

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="jquery.multiscroll.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.easing.1.3.min.js"></script>
  <script src="js/jquery.multiscroll.min.js"></script>
</head>

HTMLの記述

<div id="multiscroll">
  <div class="ms-left">
      <div class="ms-section">左のコンテンツ 1</div>
      <div class="ms-section">左のコンテンツ 2</div>
      <div class="ms-section">左のコンテンツ 3</div>
  </div>
  <div class="ms-right">
      <div class="ms-section">右のコンテンツ 1</div>
      <div class="ms-section">右のコンテンツ 2</div>
      <div class="ms-section">右のコンテンツ 3</div>
  </div>
</div>

Left、Right それぞれについとなる、ものを作ります

それぞれ上から順となっています

プラグインの実行

<script>
$(document).ready(function() {
    $('#multiscroll').multiscroll();
});
</script>

最後にコードの実行を行います

bodyの閉じタグの直前ぐらいに入れるといいでしょう。

コードをまとめたもの

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="jquery.multiscroll.css">
  <script src="js/jquery-1.11.1.min.js"></script>
  <script src="js/jquery.easing.1.3.min.js"></script>
  <script src="js/jquery.multiscroll.min.js"></script>
</head>
<body>
  <div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section">左のコンテンツ 1</div>
        <div class="ms-section">左のコンテンツ 2</div>
        <div class="ms-section">左のコンテンツ 3</div>
    </div>
    <div class="ms-right">
        <div class="ms-section">右のコンテンツ 1</div>
        <div class="ms-section">右のコンテンツ 2</div>
        <div class="ms-section">右のコンテンツ 3</div>
    </div>
  </div>
<script>
$(document).ready(function() {
    $('#multiscroll').multiscroll();
});
</script>
</body>
</html>