2、3年前に流行り初めた、Webページをスクロールすることで背景や各要素がアニメーションしながら表示されたり、視差効果を伴って現れる、「パララックス」デザイン。
パララックス効果やスクロールアニメーションを実現できるモジュールはいくつかあるのですが、その中でも「scrollReveal.js」は軽量かつ単体で利用可能で、HTMLタグにdata-sr属性を追加して、その値に時間、アニメーションの種類、表示位置などを指定することで豊富なエフェクトが簡単に定義できるので、試しに使ってみました。
デモページのソースを引っこ抜いて不要な部分は削って、動作をチェックしてみました。
See the Pen
Scroll revealing sample by digistate (@digistate)
on CodePen.
使い方
scrollRevealの読み込み
まずはhead内かドキュメントの最後にメインスクリプトを読み込ませておきます。
<script src="scrollReveal.min.js"></script>
scrollReveal.jsのあとに以下を呼び出すだけ。
<script>window.sr = new scrollReveal();</script>
アニメーションの規定値をカスタマイズして実行するには、以下のように対象の「キーワード」とその値をまとめて変数で渡しておきます。
<script>
var config = {
reset: true,
over: '0.8s',
move: '50px',
mobile: true
};
window.sr= new scrollReveal(config);
</script>
オブジェクトごとにエフェクトを指定
スクロールしたときにどのようなアニメーションをさせるかを、各オブジェクト(タグ)にdata-sr属性を追加し、提供されている「キーワード」を組み合わせることで定義します。
<h1 data-sr="enter top hustle 50px over 1.5s">scrollReveal<small>.js</small></h1>
この場合のアニメーション定義の意味は、enter topで表示開始の起点(上部から)を指定、hustle 50pxはイージングの種類(他にease, ease-in, ease -in-out, ease-out)とその距離、over 1.5sはアニメーション時間 をそれぞれ指定しています。
オブジェクトを非表示にしておく
対象の各オブジェクトは、スクロールしながら表示させるため、CSSで最初にdata-sr属性を持つ要素をすべて非表示にしておきます。
[data-sr] { visibility: hidden; }
指定できるキーワードが豊富なので、要素ごとにどのようなアニメーションを施すかを決めるのに悩みそうですが、scrollReveal.jsだけで高度なスクロールエフェクトが自由に表現できるのはありがたいですね！