ガジェット通信

見たことのないものを見に行こう

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

DATE:
  • ガジェット通信を≫

こんにちは、おじいちゃんです。

今回は進捗率を計算して、スクロールアニメーションを実装する方法について書きたいと思います。

進捗率とは

進捗率とは、作業がどのくらい進んでいるかをパーセンテージ(0%から100%)で表したものになります。

スクロールアニメーションで進捗率を使うポイント

スクロールアニメーションで進捗率を利用する場合は、スクロール開始地点(始点)からスクロール終了地点(終点)までの進捗率を、0から1で求めるように計算するとより使い勝手がよくなります。

どうして進捗率を0から1で取得するの?

なぜ使い勝手がよくなるかというと、理由は0から1という値にあります。

CSSのプロパティには、各々のプロパティで個別の最小値・最大値あるいは任意の値をいれることができます。

例えば、透明度を扱うopacityは最小値が0で最大値が1ですが、要素の回転を扱うrotationは最小値0で最大値が360ですよね。(シンプルに使う場合ですが)

0から1という値には、アニメーションをさせる際、進捗率に任意の値をかけて、欲しいプロパティの値を自分で作ることができるという利点があります。

window下部をアニメーション発火位置(START)として、指定したスクロール領域の始点(0)、終点(1)の間でアニメーションしていることがわかります。

複数のDOM、複数のプロパティをアニメーションさせたい場合でも、アニメーションさせたい範囲が同じなら、計算する進捗率は1つで済みます。この進捗率を、先ほど挙げたCSSのプロパティで使っています。

進捗率が便利なモノということが伝わったと思われるところで、次に計算方法を考えてみましょう。

計算方法

まずは計算に必要な要素を洗い出してみましょう。
計算に必要なのは下記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と略されたりしますね。

まとめ

いかがでしたでしょうか。

「今まで適当な値いれてアニメーションさせてました」「いまいち制御できない」という方たちが少しでも考えやすくなってもらえたら幸いです。

そろそろ秋が来て、冬が来ますね。
おでんの季節です。
コンビニでおでんを買うときは、大根と厚揚げとこんにゃくの3つと決めているのですが、今年は違う組み合わせにしてみようかと思ってしてます。大根だけは変えられませんけどね。

楽しみです。染みた大根は沁みます。

ぐっばい〜。

カテゴリー : 生活・趣味 タグ :
LIGの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。