css js【簡単】下からふわっと出てくるアニメーションの作り方
20.08.28
最近よく見る下からふわっと出てくるアニメーションで。もっとも簡単な実装方法をご紹介します。
header内に以下を記入します。
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本体をこのコードより手前に入れるのを忘れずに! ↓本体です!↓
1 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> |
関連記事
-
2021.05.25 Pagespeed insights高速化まとめ
-
2019.06.10 css PCで背景固定演出→スマホでは背景普通演出にする方法
-
2020.10.07 ブラウザの縦幅サイズいっぱい表示、その中央に画像などのコンテンツを置く方法
-
2021.11.17 カスタム投稿タイプ「CPTUI」で個別にテンプレートを作る方法
-
2022.03.09 カスタムフィールドで作ったフィールドを他のページに表示する方法。