一風変わったデザインを作りたい
浦島です。今回は左右二分割して上下からカッコよく現れるjQueryプラグイン「multiscroll.js」を紹介していきます。
今回も非常に簡単なコードで実装することができます。
まずは公式サイトでサンプルをご覧ください。
公式サイトからフォルダをダウンロードしたら解凍しましょう。
今回必要なファイルは「jquery.easings.min.j」、「jquery.multiscroll.js」この二つです
jquery とmultiscroll.jsを読み込みましょう
|
1 2 3 |
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="jquery.easings.min.js"></script> <script type="text/javascript" src="jquery.multiscroll.js"></script> |
先ほどのファイルとjQueryのcdnを読み込んでいます。
htmlのこの様に書き込んでいきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="multiscroll"> <div class="ms-left"> <div class="ms-section" id="left1">左<br>第一セクション</div> <div class="ms-section" id="left2">左<br>第二セクション</div> <div class="ms-section" id="left3">左<br>第三セクション</div> </div> <div class="ms-right"> <div class="ms-section" id="right1">右<br>第一セクション</div> <div class="ms-section" id="right2">右<br>第二セクション</div> <div class="ms-section" id="right3">右<br>第三セクション</div> </div> </div> |
スクリプトを読み込んでいきましょう
|
1 2 3 4 5 |
<script type="text/javascript"> $(document).ready(function () { $('#multiscroll').multiscroll(); }); </script> |
これが一番標準的な動作です
他にもオプションがあるのでこちらで確認してください
最終的なコードはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <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="jquery.easings.min.js"></script> <script type="text/javascript" src="jquery.multiscroll.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#multiscroll').multiscroll(); }); </script> <style> #left1 { background: rgb(223, 72, 72); } #right1 { background: rgb(216, 115, 115); } #left2 { background: rgb(53, 53, 209); } #right2 { background: rgb(126, 126, 211); } #left3 { background: rgb(61, 228, 61); } #right3 { background: rgb(135, 197, 135); } </style> <title>multiscroll.js test</title> </head> <body> <div id="multiscroll"> <div class="ms-left"> <div class="ms-section" id="left1">左<br>第一セクション</div> <div class="ms-section" id="left2">左<br>第二セクション</div> <div class="ms-section" id="left3">左<br>第三セクション</div> </div> <div class="ms-right"> <div class="ms-section" id="right1">右<br>第一セクション</div> <div class="ms-section" id="right2">右<br>第二セクション</div> <div class="ms-section" id="right3">右<br>第三セクション</div> </div> </div> </body> </html> |
セクションに色をつくて動作がわかりやすい様にしてみました。
※ divのクラス名を変えてしまうと動作しなくなるので,cssをいじる場合はidをつけましょう
以上,スクロールで切り替えられるjQuery「multiScroll.js」の紹介でした。
Follow me!
