css js【簡単】下からふわっと出てくるアニメーションの作り方

20.08.28

最近よく見る下からふわっと出てくるアニメーションで。もっとも簡単な実装方法をご紹介します。
header内に以下を記入します。

<script src="https://unpkg.com/scrollreveal"></script>
<script>
	$(function(){
            ScrollReveal().reveal('.変化させるクラス名',{ 
								  delay: 400, //アニメーションの発生タイミング
								  distance: '30px', //要素の移動距離
								  origin: 'bottom', //要素が移動してくる方向 top/right/bottom/left
								  duration:4000, //アニメーション完了までの速度
								  opacity:0, //アニメーション開始前の要素の不透明度
								  });
        });
</script>

$(function(){

ScrollReveal().reveal('.変化させるクラス名',{

delay: 400, //アニメーションの発生タイミング

distance: '30px', //要素の移動距離

origin: 'bottom', //要素が移動してくる方向 top/right/bottom/left

duration:4000, //アニメーション完了までの速度

opacity:0, //アニメーション開始前の要素の不透明度

});

</script>

変化させるクラス名という箇所にクラスを入れておしまいです。要素が移動してくる方向はそれぞれtop/right/bottom/leftです。
あ！あとjquery本体をこのコードより手前に入れるのを忘れずに！　↓本体です！↓

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

参考↓
https://pecopla.net/web-column/scrollreveal

お役に立てましたらadsenseクリックお願いします！

いかがでしたでしょうか？もしお役に立てましたら、お賽銭のつもりでadsenseをポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

« ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法

All-in-one-wp-migrationで引っ越したらサイトが映らなくなってしまった時の対処法 »

css js【簡単】下からふわっと出てくるアニメーションの作り方

お役に立てましたらadsenseクリックお願いします！

関連記事