コピペで簡単！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の箇所まで来たら発動する感じですね。

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

サンプル

こんな感じで↓

ふわっと出現します。

では現場から以上です！