こんにちは。
今回は左右に2分割した画面を上下逆にスライドさせるjQueryプラグイン「multiScroll.js」！です。
画面を半分に分割して、上下逆方向にスクロールさせる事ができるjQueryプラグインを紹介します。
左右に2分割した画面を上下逆にスライドさせるjQueryプラグイン「multiScroll.js」！
multiScroll.js
jQueryプラグイン「multiScroll.js」をダウンロードしてみよう！
https://github.com/alvarotrigo/multiscroll.jsにアクセスして右にある「Download ZIP」のボタンをクリックしてダウンロードします。
jQueryプラグイン「multiScroll.js」を設置してみよう！
jquery.multiscroll.cssをhead内に読み込みます。
1 | <link rel="stylesheet" href="jquery.multiscroll.css"> |
jQuery本体とjquery.easings.min.jsとjquery.multiscroll.jsを/bodyの手前に読み込みます。
1 2 3 | <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.easings.min.js"></script> <script type="text/javascript" src="js/jquery.multiscroll.js"></script> |
その下に下記のスクリプトを記述します。
1 2 3 4 5 | <script> $(document).ready(function() { $('#multiscroll').multiscroll(); }); </script> |
html部分を記述します。
先程指定した「multiscroll」というidを付けますよ。
1 2 3 4 5 6 7 8 9 10 11 12 | <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> |
jQueryプラグイン徹底活用 プロのデザインアイデアとテクニック
いかがでしたか。迫力あるコンテンツの切り替えができますね。
以上で左右に2分割した画面を上下逆にスライドさせるjQueryプラグイン「multiScroll.js」！でした。
