视差

根据文档的滚动位置动画 CSS 属性。

用法

要应用此组件，请将 data-uk-parallax 属性添加到容器元素。 为您要动画的每个 CSS 属性添加一个具有所需动画目标值的选项。

标记

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

选项

UIkit 提供了许多选项，您可以将其添加到 data-uk-parallax 属性中

注意 您可以通过将宽度和高度等具有单个值的任何 CSS 属性添加到属性中来对其进行动画处理。

标记

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

开始和停止值

属性始终从当前值动画到您在选项中设置的目标值。 但是，您也可以自己定义开始值。 这是通过将包含两个以逗号分隔的值的字符串传递给选项来完成的。

注意 某些属性（如颜色）需要开始和停止值！

标记

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

嵌套动画

为嵌套元素使用不同的动画是一项简单的任务。 只需在第一个视差容器内创建另一个容器，并将您的选项添加到新的 data-uk-parallax 属性中即可。

示例

标记

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

目标选项

通常，动画持续的时间与元素本身在视口中持续的时间一样长。 要根据另一个元素的视口可见性开始和停止动画，请使用 target 选项。 这在使用嵌套动画时很有帮助。

示例

标记

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

速度

要调整动画的缓动，请添加 velocity 选项。

示例

标记

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

视口

使用 viewport 选项，可以调整动画的持续时间。 当值为 1 或 false 时，动画将持续到元素在视口中为止。 例如，将其设置为 0.5，则仅在视口的前一半中对属性进行动画处理。

示例

标记

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

JavaScript 选项

手动初始化元素

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