目次
jQueryで画像をフワット表示させる方法をご紹介します
「jquery」でを使ってスクロールした際に画像を下からフワッと表示させます!!
「jquery.js」をダウンロード致します。
ダウンロード先
HTMLを記載
下記のソースを追加してください。
画像は表示したい画像のURLを記載してください。
|
1 |
<figure><img class="fadein" src="http://teach.web-represent.link/wp-content/uploads/2017/12/a97296db-s-1.png" alt="" /></figure> |
Cssを記載
下記のソースを追加してください。
|
1 2 3 4 5 |
.fadein { opacity : 0; transform: translateY(20px); transition: all 1s; } |
Javascriptを記載
下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var targetElement = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > targetElement - windowHeight + 200){ $(this).css('opacity','1'); $(this).css('transform','translateY(0)'); } }); }); }); </script> |
サンプル
下記のソースをお使いください。
表示サンプルを掲載いたします。
サンプルはこちら：下から画像がフワッと表示サンプル
参考サイト：ISHI NOTE
