跳过主内容

文档

视差

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

用法

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

选项 描述 值 起始值
x 动画 translateX。 长度 0
y 动画 translateY。 长度 0
bgy 动画背景 Y 位置。 长度 初始
bgx 动画背景 X 位置。 长度 初始
rotate 动画顺时针旋转。 deg 0
scale 动画缩放。 数字，长度 1
color 动画颜色 颜色 初始
background-color 动画背景颜色 颜色 初始
border-color 动画边框颜色 颜色 初始
opacity 动画不透明度。 数字 初始
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>

  • 标题

  • <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);