JDX01(2017):Travel World(2)

範例結果

五、Section1:當視窗捲動後,淡入/淡出效果

S1:JS 設定

//視窗捲動
$(window).scroll(function(){
  var $scrollPos = $(window).scrollTop();   //記錄:視窗已捲動高度
    var $windowHeight = $(window).height();   //記錄:視窗開啟高度

  //sec1 視窗捲動時,淡入、淡出效果
  $('.intro').each(function(){
      var $thisPos = $(this).offset().top;
      if(($windowHeight + $scrollPos) >= $thisPos) {
         // console.log('$windowHeight:'+$windowHeight+'/$scrollPos:'+$scrollPos+'/$thisPos:'+$thisPos);
          $(this).addClass('fadeIn');
      }else{
          $(this).removeClass('fadeIn');
      }
  });

});     //$(window).scroll end

S2:CSS美化

/*補上*/
.intro {
  opacity: 0;
  transition: all 1.5s;
  transform: translateY(50px);
}
/*新增*/
.fadeIn {
  opacity: 1;
  transform: translateY(0);
}