進捗率を計算してスクロールアニメーションを制御する方法

おじいちゃん

2015.09.04

Web制作

計算方法

まずは計算に必要な要素を洗い出してみましょう。
計算に必要なのは下記4つになります。

始点
終点
始点と終点の差
スクロール値

始点と終点の差は、終点から始点を引くことで求めることができます。

始点と終点の差 = 終点 – 始点

具体的な例に当てはめて考えていきましょう。

計算をしてみよう

500pxから1200pxの間でスクロールアニメーションさせたい場合、始点が500px、終点1200pxとなります。始点と終点の差はさきほどあげた式から700pxになります。

始点（500px）
終点（1200px）
始点と終点の差（700px）
スクロール値（スクロール値により変化）

上記の要素を使って、進捗率が始点、中点、終点のときの値を求めてみましょう。

始点（進捗率0.0％） 0 = 0px（スクロール値） / 700px（始点と終点の差）
中点（進捗率0.5％） 0.5 = 350px（スクロール値） / 700px（始点と終点の差）
終点（進捗率1.0％） 1 = 700px（スクロール値） / 700px（始点と終点の差）

つまり進捗率は下記の式で求めることができます。

進捗率　=　スクロール値　/　始点と終点の差

始点と終点の差はさきほど終点から始点を引くことで計算していたので、

進捗率　=　スクロール値　/　（終点　-　始点）

となります。

これで0pxから700pxをスクロールした際の進捗率を計算できます。

しかし、今回求めたい値は500pxから1200pxの間の進捗率でした。スクロール値の開始した値が500px、終了した値が1200pxになるように、変化するスクロール値から始点を引きます。

進捗率 = （スクロール値 – 始点） / （終点 – 始点）

これで500pxから1200pxをスクロールした際の進捗率の計算方法がわかりました。それでは、スクロールアニメーションを実装するためのJavaScriptを見ていきましょう。

実装方法

var start = 500;    //始点
var end = 1200;     //終点

function eventScroll(){
    //スクロール値を取得
    var scrollTop = window.scrollY;
    //スクロールの度に500px-1200pxの間かどうかを判定
    if(start <= (scrollTop + window.innerHeight) && (scrollTop + window.innerHeight) <= end){
        //進捗率を計算
        var prog = (scrollTop - start) / ( end - start );
        /*--- CSSのプロパティに進捗率を代入して計算 ---*/
    }
}
//windowのスクロールイベントを付与
window.addEventListener('scroll',eventScroll);

上が進捗率を求めるためのJavaScriptになります。

進捗率は英語でprogressなので、スクロールアニメーション系のライブラリでは、progと略されたりしますね。