轻量级的的视差引擎Parallax.js

所属分类:其他-动画效果

 111568  499  查看评论 (21)
分享到微信朋友圈
X
轻量级的的视差引擎Parallax.js ie兼容10

简单,轻量级的的视差引擎,智能设备的方向作出反应。凡没有陀螺仪或运动检测硬件是可用的,光标的位置来代替。

使用步骤

只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度0,将导致层保持静止,深度为1,将导致层移动至所计算的运动的总效应。值插图中0和1,会造成层移动相对于所提供的比例。

<ul id="scene">
  <li class="layer" data-depth="0.00"><img src="layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="layer1.png"></li>
</ul>

视差场景,请选择您的父DOM元素,并把它传递给视差的构造函数。

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);

行为:数据属性的例子

<ul id="scene"
  data-calibrate-x="false"
  data-calibrate-y="true"
  data-invert-x="false"
  data-invert-y="true"
  data-limit-x="false"
  data-limit-y="10"
  data-scalar-x="2"
  data-scalar-y="8"
  data-friction-x="0.2"
  data-friction-y="0.8">
  <li class="layer" data-depth="0.00"><img src="graphics/layer6.png"></li>
  <li class="layer" data-depth="0.20"><img src="graphics/layer5.png"></li>
  <li class="layer" data-depth="0.40"><img src="graphics/layer4.png"></li>
  <li class="layer" data-depth="0.60"><img src="graphics/layer3.png"></li>
  <li class="layer" data-depth="0.80"><img src="graphics/layer2.png"></li>
  <li class="layer" data-depth="1.00"><img src="graphics/layer1.png"></li>
</ul>

行为:构造函数对象实例

var scene = document.getElementById('scene');
var parallax = new Parallax(scene, {
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});

行为:API示例

var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
parallax.enable();
parallax.disable();
parallax.calibrate(false, true);
parallax.invert(false, true);
parallax.limit(false, 10);
parallax.scalar(2, 8);
parallax.friction(0.2, 0.8);

jQuery

$('#scene').parallax();

jQuery的:传递选项

$('#scene').parallax({
  calibrateX: false,
  calibrateY: true,
  invertX: false,
  invertY: true,
  limitX: false,
  limitY: 10,
  scalarX: 2,
  scalarY: 8,
  frictionX: 0.2,
  frictionY: 0.8
});

jQuery API

var $scene = $('#scene').parallax();
$scene.parallax('enable');
$scene.parallax('disable');
$scene.parallax('calibrate', false, true);
$scene.parallax('invert', false, true);
$scene.parallax('limit', false, 10);
$scene.parallax('scalar', 2, 8);
$scene.parallax('friction', 0.2, 0.8);
相关插件-动画效果

迅雷会员活动页 红包雨效果

js红包雨从上往下随机落下
  动画效果
 24166  242

可爱的3D角色动画

可爱的3D人物动画,视线跟随鼠标移动,可拖动旋转。
  动画效果
 8597  87

3D签到墙 threejs(使用元素周期表修改)

采用threejs官方demo的元素周期更改的,展示为图片,可自动更换或手动更换,目前为旋转状态;模拟推送用户可以优化随机更改图片应该会更好点。
  动画效果
 40602  414

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 30233  309

讨论这个项目(21)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    lxx 0
    2019/10/10 14:25:14
    当设备在转到90度左右再恢复水平位置的时候,画面会有小幅度的跳动,如何解决这个bug? 回复
    WeiFree 0
    2019/3/6 18:03:11
    手机陀螺仪有时候会出现跳动,左上角跳到右下角的问题 回复
    洋洋 0
    2017/12/18 16:19:05

    这个效果以及官方案例都是整个页面。请问如何实现到局部呢?也就是移入父容器有效果,移出父容器无效果。

        &水若寒0
        2017/12/21 19:59:12

        我也在找这种方案,可惜还没找到

        &水若寒1
        2017/12/21 21:11:31

        我找到了一种方法解决这个问题。

        $("#scene").hover(function(){
            $('#scene').parallax('enable');
        },function(){
           $('#scene').parallax('disable');
        });

        但感觉卡顿,还得在优化

    回复
    Super 0
    2017/9/1 11:09:04
    轨迹 0
    2017/8/22 17:30:05
    killerlei 0
    2017/5/10 17:03:49

    测试IE9也兼容啊

    回复
    555333222 1
    2017/2/5 7:48:05

    资源被删了 求哪位大侠发一份,万分感谢邮箱:[email protected]

        西瓜0
        2017/2/5 11:59:13
        感谢反馈,下载资源以修改正确。
    回复
    SuperFei 0
    2016/12/20 16:12:28
    代码为什么没了 回复
    秦时明月? 0
    2016/10/12 14:10:00
    下下来的跟这个完全不一样啊!
        розлюбила0
        2018/1/6 17:57:54

        就是

    回复
    UI-曾依明 0
    2016/8/30 16:08:00
    国外看到一个兼容ie8的 只不过只有横向的滚动
        Littlombie0
        2016/12/28 10:12:02

        求地址,谢谢

    回复
取消回复