jQueryで下からフワッと画像を表示

1 jQueryで画像をフワット表示させる方法をご紹介します
2 サンプル
- 2.1 Related Posts
- 2.2 いいね:

jQueryで画像をフワット表示させる方法をご紹介します

「jquery」でを使ってスクロールした際に画像を下からフワッと表示させます!!

「jquery.js」をダウンロード致します。
ダウンロード先

HTMLを記載

下記のソースを追加してください。
画像は表示したい画像のURLを記載してください。

<figure><img class="fadein" src="http://teach.web-represent.link/wp-content/uploads/2017/12/a97296db-s-1.png" alt="" /></figure>

1	<figure><img class="fadein" src="http://teach.web-represent.link/wp-content/uploads/2017/12/a97296db-s-1.png" alt="" /></figure>

Cssを記載

下記のソースを追加してください。

.fadein {
  opacity : 0;
  transform: translateY(20px);
  transition: all 1s;
}

.fadein {

opacity : 0;

transform: translateY(20px);

transition: all 1s;

}

Javascriptを記載

下記のソースを追加してください。
※読み込みのcssはサンプルのリンク先を参照してください。

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