こんにちは。
ウェブラボ技術メモです。
今回は少し動きのあるサイトで使えそうなプラグインをご紹介します。
どんなプラグインか、説明するより見て操作してみるのが一番でしょう。
ということで、まずはデモをご覧ください。
レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。
何か対比したいものを左右に並べても良いでしょうし、1つのコンテンツでも画像と文章で分けるなど、色々な見せ方ができると思います。
ページ上部と右側にナビゲーションがついているので、現在地も把握しやすいですね。
では早速実装してみましょう。
プラグインは下記よりダウンロードしてください。
・GitHub
https://github.com/alvarotrigo/multiscroll.js
まずは下記のようにJquery本体と一緒にプラグインのjsとcssを読み込ませます。
今回は一緒にjquery.easings.min.jsも読み込ませましょう。こちらのjsはイージング、つまり単調な動きだけでなく、加速や減速など動きに強弱のついたエフェクト
処理をつけるためのものです。
<link rel="stylesheet" href="css/jquery.multiscroll.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.easings.min.js"></script>
<script src="js/printThis.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
// ここからオプションを指定する
sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'], //オプションで背景色を指定できます
anchors: ['first', 'second', 'third'], //ナビゲーションのテキストを変更できます
menu: '#menu',
navigation: true, // 右のナビゲーションの有効化
navigationTooltips: ['One', 'Two', 'Three'], //右側のナビゲーションにテキストを表示させます
loopBottom: true, //「true」にすると最初のセクションから上にスクロールした時に、最後のセクションに移動するようになる。
loopTop: true
});
});
</script>
次にHTMLを記述します。
下記のように、左右のコンテンツを分け、その中にスライドさせるコンテンツを記述していきます。もちろんテキストだけでなく画像等どんなコンテンツを入れても構いません。
<div id="myContainer">
<!-- 左側のコンテンツ内容を記述 -->
<div class="ms-left">
<div class="ms-section">
<h2>左コンテンツ1</h2>
<p>左のコンテンツ1番目のものが入ります。</p>
</div>
<div class="ms-section">
<h2>左コンテンツ2 </h2>
<p>左のコンテンツ2番目のものが入ります。</p>
</div>
<div class="ms-section">
<h2>左コンテンツ3</h2>
<p>左のコンテンツ3番目のものが入ります。</p>
</div>
</div>
<!-- 右側のコンテンツ内容を記述 -->
<div class="ms-right">
<div class="ms-section">
<h2>右コンテンツ1</h2>
<p>右のコンテンツ1番目のものが入ります。</p>
</div>
<div class="ms-section">
<h2>右コンテンツ2</h2>
<p>右のコンテンツ2番目のものが入ります。</p>
</div>
<div class="ms-section">
<h2>右コンテンツ3</h2>
<p>右のコンテンツ3番目のものが入ります。</p>
</div>
</div>
</div>
たったこれだけでデモのようなページが出来上がりです！
とても簡単に実装できる上に、今チェックしてみたところ、なんとこのプラグインはIE7でも動くようです。
旧バージョンのIEサポートが終わり、対象ブラウザからカットされる事が多くなってきましたが、どうしても対応させなければならない！というような時にもこれなら安心して使えそうですね。
というわけで、今月の技術メモは以上です。
次回もお楽しみに！