JParallax 基于 jQuery 视差滚动插件 - 文章教程

JParallax 基于 jQuery 视差滚动插件

发布于 2020-07-14 字数 7862 浏览 1084 评论 0

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

下载

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

使用方法

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

JParallax 是干什么的?

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

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

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

JParallax 基于 jQuery 视差滚动插件

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

下面是一些图片的演示:

JParallax 基于 jQuery 视差滚动插件

更多的演示

使用 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.

小贴士

透明图像层

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

相关链接

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

勿忘心安

文章 0 评论

ekko

文章 0 评论

江挽川

文章 0 评论

献世佛

文章 0 评论

Meets

文章 0 评论