jQuery/Vanilla Javascript

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

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

以下よりダウンロードします。
緑ボタン【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>

サンプル

スクロール時の表示アニメーションでは個人的にScrollRevealがとても使いやすいと思っていました。今回のバージョンで前々から気になっていたシンタックスエラーも解消されていたので改めて紹介しました。
cssアニメーションとの組み合わせることで表示方法が広がっていくのも強みの一つです。

uhaha

やはり人気のプラグインはどんどん改修されてよくなっていきますね!

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*