【ScrollReveal + CSS animation】スクロール時のアニメーション基本と応用について

ScrollReveal

ScrollRevealとはスクロール時にふわっと表示されるようなアニメーション設定に便利なプラグインです。今回はバージョンアップしたv4.0.7の基本的な使い方とcssアニメーションとの組み合わせでぼかしの表示の仕方を紹介します。

ScrollRevealの基本的な設定
ぼかしを使ったアニメーション
まとめ

ScrollRevealの基本的な設定

以下よりダウンロードします。
緑ボタン【Code】から【Download Zip】を選択します。
ScrollReveal　GitHHub

jsファイルの読み込みます。

<script src="js/scrollreveal.min.js"></script>

アニメーションしたい表示要素にクラス wrap_contentを設定

<div class="wrap_content">
    <div><img src="img/img01.jpg" alt=""></div>
    <div><img src="img/img02.jpg" alt=""></div>
    <div><img src="img/img03.jpg" alt=""></div>
</div><!-- wrap_content -->

.wrap_contentに対してオプションを設定します。

<script>
$(document).ready(function() {
ScrollReveal().reveal('.wrap_content', {
    origin: 'bottom',//移動の開始方向
    distance: '5%',//移動の長さ
    delay: 0,//アニメーション待機時間
    duration: 800,//アニメーション時間
    reset: false,//falseで表示したままに
});
});//jQuery

</script>

スクロール時に下からふわっと表示されるようになります。

ぼかしを使ったアニメーション

※IE11ではぼかし加工は未対応です。

cssアニメーションと組み合わせでScrollRevealでは用意されていない動きを実現することができます。

ぼかし加工用クラスblr_setとぼかしリセット用クラスblr_resetを用意してぼやけた要素がスクロールと同時にピントが合うようなアニメーションを作成します。

.blr_set{
    filter: blur(10px);
    transition: all 0.8s ease;
}
.blr_reset{
    filter: blur(0px);
}

HTMLでの要素にはぼかし用のクラスblr_setを追加しておきます。

<div class="wrap_content blr_set">
    <div><img src="img/img01.jpg" alt=""></div>
    <div><img src="img/img02.jpg" alt=""></div>
    <div><img src="img/img03.jpg" alt=""></div>
</div><!-- wrap_content -->

ScrollReveal()の処理後に実行されるafterRevealにぼかし加工のリセット用クラスblr_resetを追加するように設定します。

cssでtransition: all 0.8s ease;を設定しているのでこのときアニメーション時間durationを0秒にしておきます。

<script>
$(document).ready(function() {
ScrollReveal().reveal('.wrap_content', {
    origin: 'bottom',//移動の開始方向
    distance: '5%',//移動の長さ
  delay: 0,//アニメーション待機時間
    duration: 0,//アニメーション時間
  reset: false,//falseで表示したままに
    afterReveal: function (el){
        el.classList.add('blr_reset');
    }
});
});//jQuery

</script>

See the Pen ScrollReveal demo by uhaha (@uhaha) on CodePen.