parallax轻量级视差引擎介绍

因项目需求 ，今天下午研究了腾讯的一个webapp，原来用的是parallax.js一款基于jquery的类库，感觉还不错。

 

插件描述

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

 

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

使用步骤

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

1 2 3 4 5 6 7 8

< 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元素，并把它传递给视差的构造函数。

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

行为：数据属性的例子

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

< 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 >

行为：构造函数对象实例

1 2 3 4 5 6 7 8 9 10 11 12 13

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示例

1 2 3 4 5 6 7 8 9

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

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

jQuery的：传递选项

1 2 3 4 5 6 7 8 9 10 11 12

$( '#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

1 2 3 4 5 6 7 8

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);

转载于:https://www.cnblogs.com/dj-chen/p/4251077.html