jQuery 2014-11-26

スクロールアニメーションが斬新!! jQueryプラグイン【multiScroll.js】使い方

multiscroll

今回は、jQueryプラグイン【multiScroll.js】の利用方法などのご紹介です。
こちらのプラグインは、セッション毎に縦に半分に分割して、スクロールアニメーション効果が作成出来るjQueryプラグインです。
各セッションは、HTML側で右と左に分かれていますので、実装もそれほど難しくないかと思います。
特設ページ・ポートフォリオ・ランディングページなどに利用すれば、面白いかもしれません。
また、オプションで、jquery.easingのエフェクトも利用できるようになっているようです。
パララックス効果もいいですが、こちらのスクロールアニメーションも面白いかもしれません。
下記にデモサイトも、ご用意しておりますのでご参考下さい。

デモサイト

必要なファイル等は、下記リンク先よりダウンロードをお願い致します。

multiScroll.js

multiScroll.js 利用方法

それでは、jQueryプラグイン【multiScroll.js】を縦に半分に分割したスクロールアニメーションを実装していきたいと思います。
実装するにあたりこちらより必要なファイル等は事前にダウンロードしておいて下さい。

必要ファイルの読み込み

まずは、head内にjQuery本体とダウンロードしたファイルの中にあるcss/jquery.multiscroll.cssとjquery.multiscroll.min.jsファイルを読み込みます。
ファイルの階層などは、ご自身の階層に合わせて下さい。
また、jquery.easingのエフェクトを利用する場合は、jquery.easings.min.jsも一緒に読み込みます。

<link rel="stylesheet" type="text/css" href="css/jquery.multiscroll.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript" src="js/jquery.easings.min.js"></script>
<script type="text/javascript" src="js/jquery.multiscroll.min.js"></script>

HTMLの準備

次に各セッションとなる、右と左の要素とセッションのメニューのHTMLメニューを記載していきます。
メニュー要素のdata-menuanchorとアンカータグは同一にしておいて下さい。
スクロールアニメーション効果で切り替わる要素は、div要素の.ms-leftで囲っている要素が、各セッションの左がに表示されます。
また、div要素の.ms-rightで囲っている要素が、各セッションの右側に表示されるようになっております。

<ul id="menu">
	<li data-menuanchor="session1"><a href="#session1">session1</a></li>
	<li data-menuanchor="session2"><a href="#session2">session2</a></li>
	<li data-menuanchor="session3"><a href="#session3">session3</a></li>
    <li data-menuanchor="session4"><a href="#session4">session4</a></li>
    <li data-menuanchor="session5"><a href="#session5">session5</a></li>
</ul>

<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 class="ms-section">セッション4 左</div>
        <div class="ms-section">セッション5 左</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 class="ms-section">セッション4 右</div>
        <div class="ms-section">セッション5 右</div>
    </div>
</div>

Scriptの挿入

上記HTMLコードの#multiscrollを指定します。
今回は、メニューも使用しますので、オプションでメニューのIDなども指定しています。
anchorsのオプションには、data-menuanchorと同一にします。左から順にセッション1、セッション2となります。

	<script type="text/javascript">
	 $(document).ready(function() {
            $('#myContainer').multiscroll({
            	anchors: ['session1', 'session2', 'session3','session4','session5'],//アンカーリンクの指定 メニューに使用するHTML5 data-menuanchorと同一にする
            	menu: '#menu',//メニューのID指定
            });
        });
    </script>

上記まで記載すれば、基本的な実装が完了となります。
僕的には、特設ページなんかに利用して、スクロールアニメーションを少し工夫してやれば面白そうなので、今度利用してみようかなと思います。
また、こちらのプラグインは、頑張ればレスポンシブにも対応出来そうです。(まだ試していません)
スクロールアニメーションも斬新ですので、是非利用してみては、いかがでしょうか?

デモサイト

オプションの解説

multiScroll.jsでは、様々なオプションも用意されていますので、そちらも少しご紹介させていただきます。

            $('#myContainer').multiscroll({
				scrollingSpeed: 1500, //スクロールのスピードを指定
				easing: 'easeOutBack', //easings.jsのエフェクト指定
            	sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f1f1f1', '#f1f1f1'],//セッショ毎の背景色を指定
            	anchors: ['session1', 'session2', 'session3','session4','session5'],//アンカーリンクの指定 メニューに使用するHTML5 data-menuanchorと同一にする
            	menu: '#menu',//メニューのID指定
				navigation: true,//小さい円のナビゲーションの有効化
				navigationPosition: 'right', //ナビゲーション位置の指定
          		navigationColor: '#ffffff', //ナビゲーションカラー
            	navigationTooltips: ['最初のセッションだよ', '2番目のセッションだよ', '3番目のセッションだよ','4番目のセッションだよ','最後のセッションだよ'],//ナビゲーションツールチップテキスト
				loopBottom: true,//最後のセッションでループの有効化
            	loopTop: true //最初のセッションでループの有効化
            });

ざっくりとした説明ですいません。
この他にも、オプションなどありますので、こちらをご確認頂ければと思います。

背景に画像を利用する場合

こちらのプラグインを利用する方は、多分背景に画像なんか利用するして、一枚の画像が、縦に半分に分割したようなスクロールアニメーションの実装をされる方もいると思いますので、そちらの利用方法も書いていきたいと思います。
今回は、一つのセッションの右と左に分割した画像を表示させて、一枚の画像を表示させるとします。
デモページのSession1のような感じの表示を完成形とします。
背景画像は、CSSのbackgroundを利用して表示させます。

背景画像の準備

まずは、背景画像の準備をしていきます。
ご自身の環境などにもよると思いますが、幅が1920pxほどの画像を半分にした右と左の画像を用意します。

HTML

HTML側は、たいして変わるところはないですが、背景画像をCSSで表示させますので、表示させるセッションにCSSのクラスを付け足します。

<div id="multiscroll">
    <div class="ms-left">
        <div class="ms-section session1">セッション1 左</div>
        <div class="ms-section">セッション2 左</div>
        <div class="ms-section">セッション3 左</div>
        <div class="ms-section">セッション4 左</div>
        <div class="ms-section">セッション5 左</div>
    </div>
    <div class="ms-right">
        <div class="ms-section session1">セッション1 右</div>
        <div class="ms-section">セッション2 右</div>
        <div class="ms-section">セッション3 右</div>
        <div class="ms-section">セッション4 右</div>
        <div class="ms-section">セッション5 右</div>
    </div>
</div>

CSS

最後にCSSのbackgroundプロパティで背景画像を指定してきます。
画像位置のleftとrightが肝となっています。

.ms-right .session1{
	background:url(ご自身の画像のファイル先) no-repeat top left;
	background-size: cover;
	}
.ms-left .session1{
	background:url(ご自身の画像のファイル先) no-repeat top right;
	background-size:cover;
	}

上記までを記載すれば、一枚の画像が、縦に半分に分割したようなスクロールアニメーション実装の完了です。
デモサイトもございますので、ご参考頂ければと思います。

デモサイト

必要なファイル等は、下記リンク先よりダウンロードをお願い致します。

multiScroll.js

こちらの記事をシェアする

こちらの記事があなたのお役にたちましたら、シェアしていただけますと大変嬉しく今後のブログ更新の糧となりますのでどうぞよろしくお願いします。(^^♪

About

Glow-Facotryでは、無料・有料のWPテーマを配布・販売サイトです。また、Web関連やWPの記事・日常的(ゲームも)なことをブログを利用して発信して行きたいと思っております。
よかったら下記のフォローをお気軽にお願いします。

関連記事

コメント

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

PREVIOUS polygon

無料でダウンロード出来る高品質なポリゴン背景

NEXT AL101_natuin0420140830001

Googleアナリティクスコードをコピーされた場合の対処法