[JS]ありそうでなかった！スクロールエフェクトのベースになるさまざまな値を取得するシンプルな超軽量スクリプト -roll.js

サイト構築 -JavaScript

Post on:2015年11月19日

roll.jsのデモ

デモは、縦長ページにDOM要素を配置したものとCanvasを使ったものがあります。
まずは、DOM要素のデモ。

demo: DOM scrolling

寿司ネタが配置された縦長ページで、5つのセクションに分けられています。
スクロールすると、各DOM要素にエフェクトが適用されます。

2枚目までスクロール

表示エリアのサイズ、ページ全体のサイズ、セクション間のサイズを元に、現在表示されている位置・スクロール量・全体からの分量・セクションからの分量をスクロールに応じて取得できます。

各数値

デモはもう一つあります。

demo: Canvas

Canvas版では、値の取得がどのようになっているのかが分かると思います。

roll.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<head>
  ...
  <script type="text/javascript" src="../dist/roll.min.js"></script>
</head>

<head>

...

</head>

Step 2: HTML

HTMLは、普通の縦長ページを作成する感じでOKです。

<div id="roll">
    <div id="steps">
        <div id="s0" class="step">Hello</div>
        <div id="s1" class="step">World</div>
        <div id="s2" class="step">How's it going</div>
    </div>
    <div id="viewport">
        <div id="pane"></div>
    </div>
</div>

<div id="s0" class="step">Hello</div>

<div id="s1" class="step">World</div>

<div id="s2" class="step">How's it going</div>

</div>

</div>

Step 3: JavaScript

スクリプトの基本書式は、下記のようになります。

Roll.DOM( viewportID, scrollpaneID, stepsID, stepClass, padding)

1	Roll.DOM( viewportID, scrollpaneID, stepsID, stepClass, padding)

上記のHTMLで、#viewportのDOM要素は下記のように設定します。

var roll = Roll.DOM("#viewport", "#pane", "#steps", ".step", 100 );

1	var roll = Roll.DOM("#viewport", "#pane", "#steps", ".step", 100 );

イベントを設定する時は、下記のようになります。

roll.on( "roll", function(step, currProgress, currPosition, totalProgress) {
    // implement your logic here
})

roll.on( "step", function(curr, last) {
    // implement your logic here
})