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>

1 2 3 4 5 6 7 8 9 10 11 12

<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>

変化させるクラス名という箇所にクラスを入れておしまいです。要素が移動してくる方向はそれぞれ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をポチっとクリックお願いします！↓上手くいきますようにお祈りしておきます！

関連記事

• 
  2020.12.08 contactform7でドメインと異なるメールアドレス(Gmail)を送信者とするときに迷惑メールにならないようにする方法。
• 
  2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
• 
  2018.11.20 フォトショップやイラレで使っているフォントを他のＰＣに引っ越す方法
• 
  2022.05.09 Xサーバーメールアドレスの追加方法
• 
  2018.10.27 秀丸　ファイルを見比べる方法やgrepを使ってフォルダ内のファイルを検索する方法。
• 
  2025.05.19 wordpressテンプレートページでも「非公開」にする方法（ログイン者だけ見える）