返回介绍

视差

发布于 2019-05-26 16:28:27 字数 3386 浏览 947 评论 0 收藏 0

依赖于页面滚动条位置的动态 CSS 特性。

用法

要使用这个组件,需要添加 data-uk-parallax 属性到容器元素。并为每个你想要使之动态变化的 CSS 属性添加对应的选项值。注意 此组件需要额外添加 parallax.js 文件,在js/components文件夹中。

<div data-uk-parallax="{bg: '-200'}">...</div>

选项

UIkit 提供了一系列的选项,你可以把它们添加到 data-uk-parallax 属性中:

选项描述
x以像素为单位的 X 轴方向位移。
xp以百分比为单位的 X 轴方向位移。
y以像素为单位的 Y 轴方向位移。
yp以百分比为单位的 Y 轴方向位移。
bg使背景图片动态变化。
bgp以百分比为单位的背景图片动态变化。
rotate以度为单位的顺时针动态变化。
scale缩放的动态变化
color色彩的动态变化(需要设置起始值和终止值)
background-color背景色彩的变化(需要设置起始值和终止值)
border-colorborder 色彩的变化(需要设置起始值和终止值)
opacity透明度的变化

注意 你可以基础性地使任意只有一值的 CSS 属性动态变化,比如宽度和高度,直接添加到属性中即可。

<div data-uk-parallax="{y: '-200', opacity: '0'}">...</div>

起始值和终止值

属性通常由当前值变化到你设置的目标值。然而,你还可以自己定义一个起始值。这将通过传递字符串到包含由逗号隔开的两个值的选项中来实现。

注意 某些属性,比如颜色,必须要有起始值和终止值。

<div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div>

嵌套的动画/Nested animation

为前提的元素使用不同的动画是很简单的事情。只需在视差容器中再创建一个容器,并在新的 data-uk-parallax 属性中添加你的选项即可。

<div data-uk-parallax="{bg: -200}">
    <div data-uk-parallax="{opacity: '0,1', scale: '0,1'}">...</div>
</div>

目标选项/Target Option

通常,视差动画从元素进入视口开始,到离开视口结束。开始和终止动画基于另一个元素在视口中的可见性,使用 target 选项进行设置。在使用嵌套动画时会很有帮助。


<div>...</div>
<div data-uk-parallax="{target: '#target-id'}">...</div>

速度/Velocity

添加 velocity 选项,调整动画的缓动效果。

<div data-uk-parallax="{velocity: '0.5'}">
    ...
</div>

视口/Viewport

使用 viewport 选项,动画持续时间将被调整。其值为 1false 时,视差动画从元素进入视口开始,到离开视口结束。将其设置为 0.5,如下面的例子,动画只在元素出现的前半个视口中发生。

<div data-uk-parallax="{viewport: '0.5'}">...</div>

JavaScript 选项

选项可用值默认值描述
velocityfloat0.5页面滚动时,动画的速度
targetmixedfalse关于动画持续时间的元素尺寸参考/Element dimension reference for animation duration.
viewportfloat (0 to 1)false依赖于视口的动画范围
mediainteger / stringfalse启用视差效果的视口宽度条件(比如640px),或CSS媒体查询

手动初始化

var parallax = UIkit.parallax(element, { /* options */ });

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文