UIkit3.x文档

视差

根据页面的滚动位置设置CSS属性的动画。

用法

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

Option Description Values Start Value
x 动画 translateX。 Length 0
y 动画翻译Y。 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('/skin/ukv3/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('/skin/ukv3/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 uk-flex-top" style="background-image: url('/skin/ukv3/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; viewport: 0.5;">Headline</h1>
        <p uk-parallax="opacity: 0,1,1; y: 100,0,0; x: -100,-100,0; scale: 0.5,1,1; viewport: 0.5;">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>

  • 标题

    痛本身就是爱的痛，主要的生态问题，但我给这种倒下的时间，让一些很大的痛和痛。

  • <div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex" style="background-image: url('/skin/ukv3/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-flex-top" uk-parallax="bgy: -200" style="background-image: url('/skin/ukv3/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-flex-top" uk-parallax="bgy: -200" style="background-image: url('/skin/ukv3/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('/skin/ukv3/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('/skin/ukv3/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-flex-top" uk-parallax="background-color: yellow,white; border-color: #00f,#f00; viewport: 0.5" 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; color: #0f0; viewport: 0.5">Headline</h1>

</div>

滤镜

CSS滤镜是将图形效果添加到页面上任何元素的简便方法。尽管它们仍然是某些浏览器的实验性特性，但是只要你的可用性不受影响，就可以安全地使用它们。使用视差组件，可以动态更改元素上的滤镜数值。

<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-flex-top" uk-parallax="sepia: 100;" style="background-image: url('/skin/ukv3/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; blur: 0,10;">Headline</h1>

</div>

SVG 笔划

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

<div uk-parallax="stroke: 45">
    <img src="" alt="" uk-svg>
</div>
  • <div class="uk-text-center" uk-parallax="stroke: 100%; viewport: 0.7">
    <img src="images/strokes.svg" alt="" uk-svg>
</div>

Note 建议使用百分比单位%，这样就不必知道笔划的确切长度。

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>

粘性视差

与Sticky 组件一起，您可以实现复杂的粘性视差效果。查看粘性视差测试中的一些示例。

组件选项

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

选项 价值 默认 描述
easing 数字 1 滚动期间的动画缓动
target 细绳 false 动画持续时间的元素尺寸参考。
start 数字，字符串 0 开始偏移。该值可以是 vh、% 和 px。它支持基本的数学操作数 + 和 -。
end 数字，字符串 0 结束偏移。该值可以是 vh、% 和 px。它支持基本的数学操作数 + 和 -。
media 数字，字符串 false 活动状态的条件 - 整数宽度（例如 640）或断点（例如 @s、@m、@l、@xl）或任何有效的媒体查询（例如（最小宽度：900px））。

JavaScript

了解更多关于JavaScript 组件的内容。

初始化

UIkit.parallax(element, options);