[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
Post on:2014年2月3日
sponsors
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。
Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。
ScrollStoryの特長
ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。
- スタイルにとらわれない、自由なスクロールベースのページを作成可能。
- 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。
- jQuery UIの16種類のイベント・コールバックが利用できます。
- アクティブなコンテンツとそうでないコンテンツに、フォーカス・ブラーさせることができます。
- アイテムはカテゴリごとにグループ化でき、イベントでカテゴリを表示できます。
- アイテムがビューポート内に表示されたか判定できます。
- ページ上のあらゆるアイテムにアニメーションでスクロールできます。
- スクロールイベントの調整とDOMは最小限の使用。
ScrollStoryのデモ
さまざまなスクロールベースのページのデモがあります。
既存のページ要素を使ったベーシックなデモ。ビューポートに表示されると「.active」が付与されハイライトします。キーボードの左右矢印キーでの操作も可能です。
基本動作はBasicと同じで、セレクタをカスタマイズできます。
data属性を加えて、各アイテム個別にスタイルを変更しています。
配列で各アイテムを生成しています。
右上のナビゲーションで各アイテムの上下にスクロールします。
アクティブなイベントをチェックします。
アクティブな位置を決め、アイテムがそこに入るとチェックします。
アクティブなアイテムをチェックし、カテゴリ名を判定して表示します。
アイテムがビューポートに入った時に、画像をロードします。
ScrollStoryの使い方
Step 1: 外部ファイル
jquery.jsとjquery-ui.jsとunderscore.js、当スクリプトを外部ファイルとして記述します。
<script src="jquery.js"></script> <script src="jquery-ui.js"></script> <script src="underscore.js"></script> <script src="dist/scrollstory.min.js"></script>
Step 2: HTML
HTMLは既存のものにclassとラッパーを加えて使用したり、配列で生成して使用することもできます。
<div id="container">
<div class="story">...</div>
...
</div>
data属性を加えて、ビューポートに表示された際にスタイルを与えることもできます。
<div id="container">
<div class="story" data-bgcolor="#0000ff">...</div>
...
</div>
Step 3: JavaScript
jQueryのセレクタで適用するコンテンツを指定し、スクリプトを実行します。
<script>
jQuery(function($) {
$('#container').ScrollStory();
});
</script>
スクリプトのオプションでは、キーボード操作、スクロールのアニメーションのスピード、アイテムがアクティブ時の判定、カテゴライズなどを設定します。
sponsors
