• HOME
  • CODE
  • コピペで簡単!jQueryとCSSでふわっとフェードインさせる方法

2020/07/10 0:05

コピペで簡単!jQueryとCSSでふわっとフェードインさせる方法

スクロールするとフワっと要素が出現する手法ですが、jQueryとCSSのみで簡単にできます。

今回はコピペでサクっと使えるサンプルをご用意しました。

 

 

サンプルコード

 

まとめて書いてしまいますがこんな感じです。

 

<div class="fade">

【フェードインさせたい要素】

</div>

 

<script>

//フェードイン

$(document).ready(function(){

  $('.fade').css('visibility','hidden');

  $(window).scroll(function(){

   var windowHeight = $(window).height(),

       topWindow = $(window).scrollTop();

   $('.fade').each(function(){

    var objectPosition = $(this).offset().top;

    if(topWindow > objectPosition - windowHeight + 100){ //ボトムから100pxの場所まで要素が来たら発動

     $(this).addClass("a-fadein");

    }

   });

  });

});

</script>

 

 

<style>

.a-fadein {

  -webkit-animation: a-fadein 1.1s both 0.4s ease-out;

  animation: a-fadein 1.1s both 0.4s ease-out;

  visibility: visible !important;

}

 

@-webkit-keyframes a-fadein {

  0% {

    opacity: 0;

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

 

@keyframes a-fadein {

  0% {

    opacity: 0;

    -webkit-transform: translateY(50px);

    transform: translateY(50px);

  }

  100% {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

  }

}

</style>

 

 

スクロールして要素がボトムから100pxの箇所まで来たら発動する感じですね。

位置は好みの場所で微調整してみてください。

 

サンプル

 

こんな感じで↓

 

 

 

ふわっと出現します。

 

 

 

では現場から以上です!

 

1353

PICK UP