寫在前面的廢話

ios-parallax.js是一款模擬蘋果iOS10樣式背景圖片視覺差效果的jquery外掛。該背景圖片視覺差效果在使用者移動滑鼠時，背景圖片會相應的搖晃，形成視覺差特效。

使用方法

在頁面中引入jquery和ios-parallax.js檔案。

<script src='path/to/jquery.min.js'></script>
<script src='path/to/ios-parallax.js'></script> 

HTML結構

使用一個

<div id="top-image"
 
>
    <div id="content" class="container center-block">
        <!--放置內容-->
    </div>
</div>  

CSS樣式

#top-image {
  background: linear-gradient(
      rgba(0, 0, 0, 0.2),
      rgba(0, 0, 0, 0.2)
  ), url('../images/bg.jpg') no-repeat fixed;
  position:fixed ;
  top:0;
  width:100
 
%;
  z-index:0;
  height:100%;
}   

初始化外掛

在頁面DOM元素載入完畢之後，可以通過下面的方法來初始化該背景圖片視覺差外掛。

$('#myContainer').iosParallax({

  // How fast the background moves
  movementFactor: 50,

  // How much to dampen the movement (higher is slower)
  dampenFactor: 36

});