js 圖片視差滾動機制

parallax.js

///////////////////////////////
// Parallax
///////////////////////////////

// Calcualte the home banner parallax scrolling
  function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = $(this).scrollTop();

    //Scroll and fade out the banner text
    $('#bannerText').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
  
    //Scroll the background of the banner
    $('#homeBanner').css({
      'background-position' : 'center ' + (-scrollPos/8)+"px"
    });    
  }


///////////////////////////////
// Initialize
/////////////////////////////// 

$(document).ready(function(){
  
  if(!isMobile()) {
    $(window).scroll(function() {        
         scrollBanner();        
    });
  }

});