Parallax.js - 一个简单且轻量级的jQuery视差插件
  • 分享到微信朋友圈
    X
立即下载 查看演示

Parallax.js 是一个简单且轻量级的jQuery视差插件，可对智能设备的方向做出反应。

使用方法：

引入 jQuery 库和 query.parallax.js

<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery.parallax.js"></script>

引入html

<div class="scene" id="scene"> 
    <img src="images/1.png" class="layer" data-depth="0.20" /> 
    <img src="images/2.png" class="layer" data-depth="0.30" /> 
    <img src="images/3.png" class="layer" data-depth="0.20" />
    <img src="images/4.png" class="layer" data-depth="0.40" />  
    <img src="images/5.png" class="layer" data-depth="0.20" />  
    <img src="images/6.png" class="layer" data-depth="0.20" />  
    <img src="images/7.png" class="layer" data-depth="0.30" />  
    <img src="images/8.png" class="layer" data-depth="0.20" />   
</div>

调用query.parallax.js

<script>
    $('#scene').parallax();
</script>

更多参数说明

<script> 
$('.scene').parallax({
    calibrateX: false, // 指定是否在初始化时缓存和计算相对于初始 x 轴值的运动。
    calibrateY: true, // 指定是否在初始化时缓存和计算相对于初始 y 轴值的运动。
    invertX: false, // true 表示图层与设备运动方向相反，false 表示图层滑开。
    invertY: true, // true 表示图层与设备运动方向相反，false 表示图层滑开。
    limitX: false, // 数值限制 x 方向上的总运动范围，false 表示允许图层完全自由移动。
    limitY: 10, // 数值限制 y 方向上的总运动范围，false 表示允许图层完全自由移动。
    scalarX: 2, // 将输入运动乘以该值，增加或减少图层运动的灵敏度。
    scalarY: 8, // 将输入运动乘以该值，增加或减少图层运动的灵敏度。
    frictionX: 0.2, // 图层x轴所经受的摩擦力大小
    frictionY: 0.8// 图层y轴所经受的摩擦力大小
});



</script>