跳至主要内容

文档

视差

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

用法

要应用此组件，请将 uk-parallax 属性添加到任何元素。使用以下选项之一来动画相应的 CSS 属性。

选项 描述 值 起始值
x 动画 translateX。 长度 0
y 动画 translateY。 长度 0
bgy 动画背景 Y 位置。 长度 初始值
bgx 动画背景 X 位置。 长度 初始值
rotate 顺时针动画旋转。 度 0
scale 动画缩放。 数字，长度 1
color 动画颜色 颜色 初始值
background-color 动画背景颜色 颜色 初始值
border-color 动画边框颜色 颜色 初始值
opacity 动画不透明度。 数字 初始值
blur 动画模糊滤镜。 像素 0
hue 动画色调旋转滤镜。 度 0
grayscale 动画灰度滤镜。 % 0
invert 动画反转滤镜。 % 0
saturate 动画饱和度滤镜。 % 0
sepia 动画棕褐色滤镜。 % 0
stroke 动画 SVG 图像中的笔画。 0

长度值可以使用 px、%、vw 和 vh 单位。可以省略像素单位。例如，x: 200 与 x: 200px 相同。还支持基本数学运算符 + 和 -。

设置一个选项以创建动画停止点。该属性将从其起始值动画到定义的停止值。

<div uk-parallax="bgy: -200">…</div>

标题

<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">Headline</h1>

</div>

起始停止点

要设置自定义起始值，请使用逗号分隔的两个值创建另一个动画停止点。

<div uk-parallax="opacity: 0,1">…</div>

标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1; y: -100,0; scale: 2,1; end: 50vh + 50%;">Headline</h1>
        <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

多个停止点

为了更好地控制属性动画，您可以在动画序列中设置中间停止点。只需使用逗号分隔的值列表。动画将在停止点之间平均分配。

<div uk-parallax="x: 0,50,150">…</div>

标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1,1; y: -100,0,0; x: 100,100,0; scale: 2,1,1; end: 50vh + 50%;">Headline</h1>
        <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

停止位置

设置可选的停止位置以指定停止点在动画序列中发生的百分比。

<div uk-parallax="x: 0,50 10%,150 50%">…</div>

标题

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
    <div class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical">
        <h1 uk-parallax="opacity: 0,1,1; y: -100,0,0; x: 100,100,0; scale: 2,1,1; end: 50vh + 50%;">Headline</h1>
        <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; end: 50vh + 50%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</div>

嵌套

可以轻松嵌套不同的视差动画。

<div uk-parallax="bgx: -50">
    <div uk-parallax="x: -100, 100">…</div>
</div>

标题

<div class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="y: 100,0">Headline</h1>

</div>

目标

动画的开始和停止取决于元素在视口中的位置。要根据另一个元素的视口可见性来开始和停止动画，请使用 target 选项。当使用嵌套动画时，这可能会有所帮助。

<div id="target">
    <div uk-parallax="target: #target">…</div>
</div>

标题

<div id="test-target" class="uk-height-large uk-background-cover uk-light uk-flex" uk-parallax="bgy: -200" style="background-image: url('images/dark.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; y: 100,0">Headline</h1>

</div>

开始和结束

要调整动画持续时间，请设置 start 和 end 选项。start 选项定义动画何时开始。默认值 0 表示目标元素的顶部边框和视口的底部边框相交。end 选项定义动画何时结束。默认值 0 表示目标元素的底部边框和视口的顶部边框相交。值可以使用任何维度单位设置，即 vh、% 和 px。% 单位与目标元素的高度有关。这两个选项都允许基本的数学运算符 + 和 -。

<div uk-parallax="start: 100%; end: 100%;">…</div>
<div uk-parallax="start: 30vh; end: 30vh;">…</div>
<div uk-parallax="start: 100% + 100; end: 100% + 100;">…</div>
0 / 0
100% / 100%
30vh / 30vh
100% + 100 / 100% + 100
<div id="test-start-end" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
     <div class="uk-grid uk-margin-auto uk-flex-inline">
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; y: 398; easing: 0;">0 / 0</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100%; end: 100%; y: 398; easing: 0;">100% / 100%</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 30vh; end: 30vh; y: 398; easing: 0;">30vh / 30vh</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-start-end; start: 100% + 100; end: 100% + 100; y: 398; easing: 0;">100% + 100 / 100% + 100</div></div>
    </div>
</div>

缓动

要调整动画的缓动效果，请添加 easing 选项。0 以均匀的速度过渡。负值开始时快速，直到完成时减速，而正值开始时缓慢，直到完成时加速。

-2
-1
-0.5
0
0.5
1
2
<div id="test-easing" class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('images/dark.jpg');">
     <div class="uk-grid uk-margin-auto uk-margin-auto-vertical uk-flex-inline">
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -2">-2</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -1">-1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: -0.5">-0.5</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0">0</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 0.5">0.5</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 1">1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="target: #test-easing; start: 100%; end: 100%; y: 200; easing: 2">2</div></div>
    </div>
</div>

颜色

从一种颜色到另一种颜色的过渡，例如边框、背景或文本颜色。使用 rgb() 定义、颜色关键字或十六进制值定义颜色。

<div uk-parallax="border-color: #00f,#f00">…</div>

标题

<div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; background-color: yellow,white; border-color: #00f,#f00;" style="border: 10px solid #000;">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-target; start: 100%; end: 100%; color: #0f0;">Headline</h1>

</div>

滤镜

CSS 滤镜是一种为页面上的任何元素添加图形效果的简单方法。虽然它们对于某些浏览器来说仍然是一个实验性功能，但只要您的可用性不受影响，就可以安全地使用它们。使用视差组件，您可以动态更改元素上滤镜的数量。

<div uk-parallax="blur: 10; sepia: 100;">…</div>

标题

<div id="test-filter" class="uk-height-large uk-background-cover uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; sepia: 100;" style="background-image: url('images/light.jpg');">

    <h1 class="uk-width-1-2@m uk-text-center uk-margin-auto uk-margin-auto-vertical" uk-parallax="target: #test-filter; start: 100%; end: 100%; blur: 0,10;">Headline</h1>

</div>

SVG 描边

视差组件可用于动画 SVG 描边。效果看起来像是 SVG 描边在您眼前绘制。SVG 图像必须作为内联 SVG 注入到标记中。这可以手动完成，也可以使用 SVG 组件完成。由于 SVG 组件在图像元素之后注入 SVG，因此 uk-parallax 属性必须添加到父元素。

<div uk-parallax="stroke: 45">
    <img src="" width="" height="" alt="" uk-svg>
</div>
<div class="uk-text-center" uk-parallax="start: 100%; end: 100%; stroke: 100%;">
    <img src="images/strokes.svg" width="350" height="340" alt="" uk-svg>
</div>

注意建议使用百分比单位 %，这样您就不必知道描边的确切长度。

SVG 图像

视差组件可以应用于内联 SVG 图像的元素，如 rect、circle 和 path。

<svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
    <rect x="0" y="0" width="10" height="10" uk-parallax="rotate: 360"/>
</svg>

响应式

建议使用 vw 或 vh 作为长度单位，而不是像素。视差将根据视口进行调整。

视差也可以仅应用于某些视口。添加具有可能值之一的 media 选项。例如，添加一个像素值，例如 640，或一个断点，例如 @s、@m、@l 或 @xl。视差将显示为指定的视口宽度及更大。

<div uk-parallax="media: @m"></div>

固定视差

与 固定定位组件 一起，您可以实现复杂的固定视差效果。在 固定视差 的测试中查看一些示例。

组件选项

这些选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。了解更多

选项 值 默认值 描述
easing 数字 1 滚动期间的动画缓动
target CSS 选择器 false 动画持续时间的元素尺寸参考。
start 长度 0 起始偏移量。值可以是 vh、% 和 px。它支持基本数学运算符 + 和 -。默认值 0 表示目标元素的顶部边框和视口的底部边框相交。
end 长度 0 结束偏移量。值可以是 vh、% 和 px。它支持基本数学运算符 + 和 -。默认值 0 表示目标元素的底部边框和视口的顶部边框相交。
media 布尔值，数字，字符串 false 活动状态的条件 - 一个整数宽度（例如 640）或一个断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如 (min-width: 900px)）。

JavaScript

了解更多关于 JavaScript 组件 的信息。

初始化

UIkit.parallax(element, options);