轻量级的的视差引擎Parallax.js
来源:互联网 发布:软件研发管理系统 编辑:程序博客网 时间:2024/05/14 09:29
地址:https://github.com/wagerfield/parallax
使用步骤
只需创建一个列表,给每个项目要内移动您的视差场景一类层和数据深度属性指定场景内的深度的元素。深度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);
行为 值 描述
relativeInput
true
orfalse
Specifies whether or not to use the coordinate system of the element
passed to the parallax constructor
. Mouse input only.clipRelativeInput
true
orfalse
Specifies whether or not to clip the mouse input to the bounds of the element
passed to the parallax constructor
. Mouse input only.calibrate-x
true
orfalse
Specifies whether or not to cache & calculate the motion relative to the initial x
axis value on initialisation.calibrate-y
true
orfalse
Specifies whether or not to cache & calculate the motion relative to the initial y
axis value on initialisation.invert-x
true
orfalse
true
moves layers in opposition to the device motion, false
slides them away.invert-y
true
orfalse
true
moves layers in opposition to the device motion, false
slides them away.limit-x
number
orfalse
A numeric value limits the total range of motion in x
, false
allows layers to move with complete freedom.limit-y
number
orfalse
A numeric value limits the total range of motion in y
, false
allows layers to move with complete freedom.scalar-x
number
Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.scalar-y
number
Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.friction-x
number
0 - 1
The amount of friction the layers experience. This essentially adds some easing to the layer motion.friction-y
number
0 - 1
The amount of friction the layers experience. This essentially adds some easing to the layer motion.origin-x
number
The x
origin of the mouse input. Defaults to 0.5 (the center). 0
moves the origin to the left edge, 1
to the right edge. Mouse input only.origin-y
number
The y
origin of the mouse input. Defaults to 0.5 (the center). 0
moves the origin to the top edge, 1
to the bottom edge. Mouse input only.除了上述的行为,有两种方法enable()和disable(),该激活和分别停用视差实例。 0 0
- 轻量级的的视差引擎Parallax.js
- 轻量级的的视差引擎Parallax.js
- 轻量级的的视差引擎Parallax.js
- 视差滚动---parallax.js
- 视差滚动(Parallax Scrolling)效果的原理和实现
- 视差滚动(Parallax Scrolling)效果的原理和实现
- 视差滚动(Parallax Scrolling)效果的原理和实现
- 有视差的滚动视图-Parallax ScrollView In Swift
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
- 30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
- 用ViewPager为你的APP引导页添加视差滚动(Parallax Scrolling)效果
- 视差滚动(Parallax Scrolling)效果的原理和实现(转)
- 视差映射(parallax mapping)
- 视差滚动 Parallax Scrolling
- Parallax视差动画效果
- 视差贴图 parallax map
- Parallax:视差视图
- 视差滚动Parallax
- linuxrc
- thinkphp页面时间格式化
- [Machine Learning]--Ensemble Method
- 约瑟夫环问题
- ffmpeg + rtp介绍
- 轻量级的的视差引擎Parallax.js
- 利用反射越过泛型检查
- linux下IDE配置,winmanager配置问题
- 机器学习-统计学习方法概论
- STM8/STM32硬件I2C读取APDS9930程序代码
- 关于数组的一些知识点和API
- 每天一个linux命令(11):nl命令
- c#上传文件到服务端
- listview的优化