跳到主要内容

文档

Parallax

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

用法

要使用这个组件，为任意元素添加 uk-parallax 属性。使用下列选项之一，为对应的 CSS 属性添加动画。

选项 说明 Values Start Value
x 为 translateX 添加动画。 Length 0
y 为 translateY 添加动画。 Length 0
bgy 为背景的 Y 轴位置添加动画。 Length Initial
bgx 为背景的 X 轴位置添加动画。 Length Initial
rotate 为顺时针旋转添加动画。 deg 0
scale 为缩放添加动画。 Number, Length 1
color 为颜色添加动画 Color Initial
background-color 为背景色添加动画 Color Initial
border-color 为边框颜色添加动画 Color Initial
opacity 为不透明度添加动画。 Number Initial
blur 为模糊滤镜添加动画。 px 0
hue 为色相旋转滤镜添加动画。 deg 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>

Headline

<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>

Headline

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>

Headline

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>

Headline

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>

Headline

<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>

Headline

<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>

Headline

<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 滤镜是给页面中任意元素添加图形效果的简单方式。尽管它对 部分浏览器 来说仍是实验性特性，但只要不影响可用性，就可以放心使用。借助 Parallax 组件，你可以动态改变元素上滤镜的强度。

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

Headline

<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 描边

Parallax 组件可用于为 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 图片

Parallax 组件可以应用到行内 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>

粘性视差

配合 Sticky 组件，你可以实现复杂的粘性视差效果。可以在 Sticky Parallax 的测试页中查看一些示例。

组件选项

这些选项都可以通过组件属性传入。多个选项之间用分号分隔。了解更多

选项 值 默认值 说明
easing Number 1 滚动过程中的动画缓动效果
target CSS Selector false 作为动画时长参照的元素尺寸。
start Length 0 起始偏移量。值可以是 vh、% 和 px。支持基本数学运算符 + 和 -。默认值 0 表示目标元素的上边框与视口下边框相交。
end Length 0 结束偏移量。值可以是 vh、% 和 px。支持基本数学运算符 + 和 -。默认值 0 表示目标元素的下边框与视口上边框相交。
media Boolean, Number, String false 激活状态的条件——整数宽度（如 640）、断点（如 @s、@m、@l、@xl）或任意合法的媒体查询（如 (min-width: 900px)）。

JavaScript

进一步了解 JavaScript 组件。

初始化

UIkit.parallax(element, options);