ScrollRevealでスクロール時にフワッと表示するアニメーションを実装する

2020年6月7日ツール関連

たまにウェブサイトを見ていると、ブラウザを画面下に向かってスクロールしていくと、コンテンツがフワッと表示されるページがありますよね

どんどんスクロールしていくと、コンテンツが「ふわふわ」っと表示されるので見ていて綺麗ですし、単純に気持ちいいです

あると無いのじゃ、ユーザに与える印象がけっこう違う気がします

そんなわけで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秒。デフォルトは0

ScrollReveal().reveal('.fedein',{delay: 100});

Distance

アニメーションを動かす移動距離

'px’、’em’、’%’の3種類が指定できます

ScrollReveal().reveal('.slidein',{distance: '50%'});

Origin

アニメーションの方向

'top’、’right’、’bottom’、’left’の4種類が指定できます

ただし、注意点として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;
}

やりすぎにご注意を

アニメーションが面白いからといって、あまりにやりすぎるとユーザにくどい印象を与えるので要注意です

公式サイトも「やりすぎに注意」と警告しています

エンジニアの年収を上げる方法

フリーランスエンジニアで年収を大幅アップしませんか?
実際に僕は会社員からフリーランスエンジニアになって年収が87万円アップしました

今なら相談(ヒアリング)するだけで3,000円分のamazonギフト券がもらえます!
初めての案件契約で最大10万円分の準備金がもらえます
非公開の高単価案件(100万円超え)が多数あります

詳しくはこちら