下载Parallax.js

引入

<!-- Scripts -->
	<script src="scripts/jquery.js"></script>
	<script src="scripts/jquery.parallax.js"></script>

使用

<div id="container" class="container">
		<ul id="scene" class="scene">
			<li class="layer" data-depth="1.00"><img src=""></li>
			<li class="layer" data-depth-x="0.80" data-depth-y="-0.80"><img src=""></li>
			<li class="layer" data-depth-x="-0.60" data-depth-y="-0.20"><img src=""></li>
			<li class="layer" data-depth="0.40" data-depth-y="-0.30"><img src=""></li>
			<li class="layer" data-depth="0.20"><img src=""></li>
			<li class="layer" data-depth="0.00"><img src=""></li>
		</ul>
	</div>
$('').parallax();

参数

Behaviours行为

There are a number of behaviours that you can setup for any given Parallax instance. These behaviours can either be specified in the markup via data attributes or in JavaScript via the constructor and API.
有很多行为,您可以设置为任何给定的视差实例。这些行为可以通过数据属性中指定的标记或通过构造函数和JavaScript API。

• Behaviour 行为 Values 值 Default 默认的 Description 描述
• relativeInput 相对输入
  • true or false 真或假
  • false 假
  • Specifies whether or not to use the coordinate system of the element passed to the parallax constructor. Mouse input only.指定是否使用元素的坐标系统传递到视差的构造函数。鼠标输入。
• clipRelativeInput
  • true or false
  • false
  • 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 or false
  • false
  • Specifies whether or not to cache & calculate the motion relative to the initial x axis value on initialisation.
• calibrate-y
  • true or false
  • true
  • Specifies whether or not to cache & calculate the motion relative to the initial y axis value on initialisation.
• invert-x
  • true or false
  • true
  • true moves layers in opposition to the device motion, false slides them away.
• invert-y
  • true or false
  • true
  • true moves layers in opposition to the device motion, false slides them away.
• limit-x
  • number or false
  • false
  • A numeric value limits the total range of motion in x, false allows layers to move with complete freedom.
• limit-y
  • number or false
  • false
  • A numeric value limits the total range of motion in y, false allows layers to move with complete freedom.
• scalar-x
  • number
  • 10.0
  • Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
• scalar-y
  • number
  • 10.0
  • Multiplies the input motion by this value, increasing or decreasing the sensitivity of the layer motion.
• friction-x
  • number 0 – 1
  • 0.1
  • The amount of friction the layers experience. This essentially adds some easing to the layer motion.
• friction-y
  • number 0 – 1
  • 0.1
  • The amount of friction the layers experience. This essentially adds some easing to the layer motion.
• origin-x
  • number
  • 0.5
  • 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
  • 0.5
  • 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.
• precision
  • integer
  • 1
  • Decimals the element positions should be rounded to. Changing this value should not be necessary anytime soon.
• pointerEvents
  • true or false
  • true
  • Setting this to false might increase the performance in some instances, while removing pointer events for the scene – eg, Links are not clickable

In addition to the behaviours described above, there are two methods enable() and disable() that activate and deactivate the Parallax instance respectively.
除了上面描述的行为,有两个方法启用()和禁用()分别激活和停用视差实例。