JParallax 基于 jQuery 视差滚动插件

Question

jParallax 是一个超酷的在视野内移动元素 jQuery 插件，由多个层组成，随着鼠标的移动，能在视野内平滑移动各层元素的相对位置，创造不同的视差效果。

下载

git clone git://github.com/stephband/jparallax.git

使用方法

jQuery( '.parallax-layer' ).parallax( options );

JParallax 是干什么的？

JParallax 会将节点转变为绝对定位的层，以响应鼠标的移动。取决于它们的尺寸，这些层以不同的速度以一种平行的方式移动。

使用一些 CSS，您可以设置窗口来查看这些层，也可以让它们自由漫游。

右边的图表说明了 JParallax 对 html 做了什么：

<ul>
<li class="parallax-layer"></li>
<li class="parallax-layer"></li>
</ul>

下面是一些图片的演示：

更多的演示

• demos/index.html
• demos/stalkbuttons.html - 多个视差效果
• demos/remotecontrol.html - 遥控视差
• demos/thumbnails.html - 漂亮的交互式缩略图
• demos/target.html - 如何顺利地处理窗口大小调整

使用 jParallax

视差的默认行为是显示层的整个宽度，以响应鼠标移动整个鼠标端口的宽度。当鼠标移动到鼠标端口的最左边时，图层的左侧与其视口的左侧相遇，当鼠标移动到鼠标端口的最右边时，层的右侧到达其视口的右手侧。

因此，使用j视差的最简单方法是使用CSS使层的大小不同。更大的层移动得更快(因此看起来更近)，除非一个层比视图小，否则它的边缘就永远看不见了。这个 Colour Drops Demo 就是这样制作的，它的默认状态是j视差，而图层的“速度”仅仅是通过不同大小的图像来控制的。只定义了 mouseport 选项，使其与 viewport 相同。

CSS

有多种方法可以有效地对jParallos进行样式设计。典型的方法是 viewport 效应，如上面的示例所示。若要查看视图端口中的图层，请将其包装在具有类似于以下样式的容器中：

.parallax-viewport{
  position:relative;
  overflow:hidden;
  width:npx;
  height:npx;
}

这个 position 声明将 viewport 设置为层的偏移量父级，而 overflow:hidden; 阻止它们在其边界之外可见。为了使各层作出反应，必须给予它们：

.parallax-layer{
  position:absolute;
}

提供这些类的下载包含一个基本样式表，演示是一个很好的参考，一些其他的效果，你可以实现。

我们都喜欢调整-调整。视差还提供选项和事件绑定，使您能够控制层的行为。

可选参数

Option	Type	Default
mouseport	选择器字符串 | jQuery对象	jQuery(document)
	标识要跟踪鼠标的DOM节点。
xparallax	boolean | 0-1 | 'n%' | 'npx'	true
yparallax	boolean | 0-1 | 'n%' | 'npx'	true
	设置为true或false以启用或禁用移动。或者，为了控制一层移动的范围，要么以像素为单位传递绝对值，要么通过范围0-1中的缩放因子(缩放因子也可以表示为百分比字符串)。此范围以外的缩放因子也被接受，但请注意，低于0(或“0%”)的因素将逆转旅行的方向，大于1(或100%)将使图层边缘出现在视区的极值中。
xorigin	0-1 | 'n%' | 'left', 'center', 'middle', 'right'	0.5
yorigin	0-1 | 'n%' | 'top', 'center', 'middle'. 'bottom'	0.5
	只有当x视差或y视差不是1时才有意义。确定当鼠标位于鼠标端口的那个点时，图层的哪个点与视图的哪个点成直线。明白了吗？ 这真的很容易。它的行为与CSS属性相同background-position。如果xstart设置为0(或“左”)，当鼠标移动到鼠标左方时，图层的左手侧到达视图的左手侧。如果它被设置为0.5(或“中间”)，当鼠标位于鼠标端口的中心时，图层的中心与视口的中心对齐。和类似的1(或“). 范围0-1以外的数字也可以使用.
freezeClass	string	'freeze'
	Class 在冻结层时设置在该层上。
decay	0-1	0.66
	设置图层“追赶”鼠标位置的速度。0是瞬间，1是永恒。
frameDuration	int (milliseconds)	30
	动画帧之间的时间长度。对于大量的大层，您可能希望增加帧持续时间以节省CPU。大约50是可以接受的(20帧/秒)，但我喜欢它活泼。现代浏览器如谷歌Chrome有非常准确的时间，但许多较旧的浏览器堵塞在以下约15毫秒。
width	int (px)	undefined
height	int (px)	undefined
	层维度的值(通常从CSS读取)可以被重写。这并不会改变层的大小，只会改变j视差关于它有多大的想法。这可能是非常有用的情况下，您希望能够“通过”上层。通常情况下，在CSS中的图层非常小，但是通过宽度和高度选项告诉j视差它们很大。

层选项

除了上面的全局选项之外，各个层还可以作为额外的参数传递它们自己的一组选项：

jQuery('.parallax-layer')
.parallax(options, layer_0_options, layer_1_options, ... );

例如，要为第二层提供一组xparalLax值，但不传递默认选项：

jQuery('.parallax-layer')
.parallax({}, {}, {xparallax: '200px'});

图层选项对象可以具有属性x视差、y视差、x原点、y原点、宽度和高度，其含义与上述相同。

事件

可以使用jQuery的触发器方法在层上触发事件：

jQuery('.parallax-layer')
.trigger('freeze');

Event	Event object
freeze	{ type: 'freeze', x: 0-1, y: 0-1, decay: 0-1 }
	Stops the layer from moving. Use the optional event object properties to send the layer to a specific position: x and y tell a layer where to go (expressed as a ratio of the width of the viewport in the range 0-1), and decay how fast to go there ( where 0 is immediate and 1 is forever ). When the layer comes to rest the class 'freeze' is given to the layer. freezeClass is setable in the options object.
unfreeze	{ type: 'unfreeze' }
	Should be 'thaw', I suppose, really. That sounds weird, though. Unfreeze sets the layer in motion again.

小贴士

透明图像层

图像的大量透明性会减缓浏览器快速渲染的能力。如果你不想让较小的浏览器窒息，避免制作巨大的半不透明的图形层。

相关链接

• 官网：http://stephen.band/jparallax/