[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory

ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。

Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。

サイトのキャプチャ

ScrollStory -GitHub

ScrollStoryの特長

ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。

  • スタイルにとらわれない、自由なスクロールベースのページを作成可能。
  • 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。
  • jQuery UIの16種類のイベント・コールバックが利用できます。
  • アクティブなコンテンツとそうでないコンテンツに、フォーカス・ブラーさせることができます。
  • アイテムはカテゴリごとにグループ化でき、イベントでカテゴリを表示できます。
  • アイテムがビューポート内に表示されたか判定できます。
  • ページ上のあらゆるアイテムにアニメーションでスクロールできます。
  • スクロールイベントの調整とDOMは最小限の使用。

ScrollStoryのデモ

さまざまなスクロールベースのページのデモがあります。

サイトのキャプチャ

Demo: basic

既存のページ要素を使ったベーシックなデモ。ビューポートに表示されると「.active」が付与されハイライトします。キーボードの左右矢印キーでの操作も可能です。

サイトのキャプチャ

Demo: custom selector

基本動作はBasicと同じで、セレクタをカスタマイズできます。

サイトのキャプチャ

Demo: data attributes

data属性を加えて、各アイテム個別にスタイルを変更しています。

サイトのキャプチャ

Demo: array of objects

配列で各アイテムを生成しています。

サイトのキャプチャ

Demo: Scroll up and down

右上のナビゲーションで各アイテムの上下にスクロールします。

サイトのキャプチャ

Demo: active event

アクティブなイベントをチェックします。

サイトのキャプチャ

Demo: trigger offset

アクティブな位置を決め、アイテムがそこに入るとチェックします。

サイトのキャプチャ

Demo: category

アクティブなアイテムをチェックし、カテゴリ名を判定して表示します。

サイトのキャプチャ

lazy load images

アイテムがビューポートに入った時に、画像をロードします。

ScrollStoryの使い方

Step 1: 外部ファイル

jquery.jsjquery-ui.jsunderscore.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>

スクリプトのオプションでは、キーボード操作、スクロールのアニメーションのスピード、アイテムがアクティブ時の判定、カテゴライズなどを設定します。

top of page

©2017 coliss