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

screenshot00486
このエントリーをはてなブックマークに追加
PR

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>
PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)