ScrollRevealでスクロール時にフワッと表示するアニメーションを実装する
たまにウェブサイトを見ていると、ブラウザを画面下に向かってスクロールしていくと、コンテンツがフワッと表示されるページがありますよね
どんどんスクロールしていくと、コンテンツが「ふわふわ」っと表示されるので見ていて綺麗ですし、単純に気持ちいいです
あると無いのじゃ、ユーザに与える印象がけっこう違う気がします
そんなわけでjavascriptライブラリ「ScrollReveal」を使って超お手軽に実装する方法を紹介します
ちなみにScrollRevealはモバイルにも対応しているのでレスポンシブサイトでも安心です
インストール(CDN)
headタグ内に以下のコードを書く
<script src="https://unpkg.com/scrollreveal"></script>以上。
もしもライブラリにアップデートがあった場合でも常に最新の安定板に更新されます
npmを使ったパッケージインストールの方法も公式サイトでは記述されてますが、上記のCDNを使った方が推奨されています
使用方法
HTML
<div class="fedein">
フワッと現れたい！
</div>Javascript
<script>
ScrollReveal().reveal('.fedein');
</script>以上。
たったこれだけのコードでHTMLで指定した部分がフワッと現れます
オプションの指定方法
かなり多くのオプションがあって全ては紹介しきれないので、ここでは代表的なものだけを
注意点としては、クラス名を指定した後のオプションを{}で囲むことです
ScrollReveal().reveal('.クラス名',{オプション});これをやっておかないとアニメーション自体が動作しません
そのほかの詳細はこちら
Delay
アニメーションが開始されるまでの時間
単位はミリ秒なので1000で1秒。デフォルトは０
ScrollReveal().reveal('.fedein',{delay: 100});Distance
アニメーションを動かす移動距離
'px’、’em’、’%’の３種類が指定できます
ScrollReveal().reveal('.slidein',{distance: '50%'});Origin
アニメーションの方向
'top’、’right’、’bottom’、’left’の４種類が指定できます
ただし、注意点としてoriginを指定するときは、必ずdistanceを一緒に指定しなけれならない
そうしないと動きのあるアニメーションにならないから要注意
ScrollReveal().reveal('.slidein',{ origin: 'bottom', distance: '50%'});View Factor
スクロールした際に、画面が表示エリアに対してどのくらい入ったらアニメーションを開始するか
0.0から1.0の間で指定
0.0だと、ちょっとでも見えたらアニメーション表示を開始
1.0だと全部が見えるエリアまでスクロールと開始しません
ScrollReveal().reveal('.fedein', {viewFactor: 0.1});Opacity
透過した見えない状態からじわっと表示されるアニメーションです
opacityの値を0.0から1.0の間で指定します
0.0は全て透過して見えない状態からスタート
1.0に近づいていくにつれて透過具合が弱くなります
ScrollReveal().reveal('.spotlight', {opacity: 0.1});注意点
ちらつきの防止方法
ただ単にScrollRevealを実装しただけだと、ページを開いた際に一瞬アニメーション前の状態が表示されてしまいます
公式ではこれを「ちらつき」と表現しています
このちらつきを防止するため公式サイトでは、あらかじめCSSによってvisibilityをhiddenにしておくことを推奨しています
HTML
<div class="fedein load-hidden">
フワッと現れたい！(+ ちらつき防止)
</div>Javascript
<script>
ScrollReveal().reveal('.fedein');
</script>CSS
.load-hidden {
visibility: hidden;
}やりすぎにご注意を
アニメーションが面白いからといって、あまりにやりすぎるとユーザにくどい印象を与えるので要注意です
公式サイトも「やりすぎに注意」と警告しています