jQueryを使ってスクロールで要素が見えてからフワッとフェードインする方法・手順

jQueryを使ってスクロールで要素が見えてからフワッとフェードインする方法です。

参考:http://weboook.blog22.fc2.com/blog-entry-415.html

基本的にアニメーションに関しては基本的にはCSSのtransitionに依存させて、jQueryの方ではスクロール量によってのcssの切替をおこなうコードになります。
表示→非表示にはcssのopacityプロパティなどを使用します。

jQuery部

<script>
//▼スクロールエフェクト
$(function(){
  $('.effect').css({
  		"padding-top":"30px",
  		"opacity":"0",
  		"transition": ".8s"
  	});
  $(window).scroll(function (){
    $("#trigger").each(function(){
      var imgPos = $(this).offset().top;    
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/3){
        $(".effect",this).css("opacity","1" );
        $(".effect",this).css({ 
          "padding": "0"
        });
      } else {
        $(".effect",this).css("opacity","0" );
        $(".effect",this).css({ 
          "padding-top": "30px"
        });
      }
    });
  });
});
</script>

HTML部

<div id="trigger">
  <div>
    <h2 class="effect">h2要素</h2>
    <p class="effect">スクロールキッカケでアニメーション</p>
  </div>
</div>

CSS部

<style>
.effect {
  transition: .8s;
  transition-delay: .8s;
} 
</style>

以上です。ちょっと雑に書いたんで修正いるかもしれません。

  • このエントリーをはてなブックマークに追加
スポンサーリンク
スポンサーリンク