UIkit3.x文档

视差

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

用法

要应用此组件，请将uk-parallax属性添加到任意元素。并为每个你要设置动画的CSS属性对应的的选项值。

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

动画属性

可以使用以下选项设置多个CSS属性的动画。。

Option Description Default Unit Default Start
x 在X 轴方向位移 px 0
y 在Y轴方向位移 px 0
bgy 使背景Y方向动态变化。 px Current
bgx 使背景X方向动态变化。 px Current
rotate 顺时针动态变化。 deg 0
scale 缩放动画。   1
color 颜色变化（需要设置起始值和终止值）   Current
background-color 背景色彩的变化（需要设置起始值和终止值）   Current
border-color border 色彩的变化（需要设置起始值和终止值）   Current
opacity 透明度的变化   Current
blur 模糊度的变化 px 0
hue 设置色调旋转滤镜的变化。 deg 0
grayscale 灰度的变化 % 0
invert 反转的变化 % 0
saturate 饱和度的变化 % 0
sepia 棕褐色滤镜变化 % 0
stroke 对SVG图像的笔触进行动画处理。   0

该值可以定义任何允许的单位类型，例如x: 20vw。对于某些选项，可以省略值的单位。它将映射到默认单位。例如，x: 200 和x: 200px是相同效果。

起始值和终止值

选项总是从当前值变化到你设置的目标值。您也可以自定义起始值。这将通过传递字符串到包含由逗号隔开的两个值的选项中来实现。

<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 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; y: -100,0; scale: 2,1; viewport: 0.5;">Headline</h1>
        <p uk-parallax="opacity: 0,1; y: 100,0; scale: 0.5,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,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>

视口位置

使用 viewport选项可以调整动画持续时间。该值定义目标元素在视口中滚动到动画完成的距离。如果值为1 或 false，动画将从元素进入视口开始一直持续到元素元素离开视口为止（默认）。如果将其设置为0.5，动画将在滚动位置到达目标元素的中间时停止。 

<div uk-parallax="viewport: 0.5">...</div>

  • Headline

  • <div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" 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="opacity: 0,1; y: 100,0; viewport: 0.5">Headline</h1>

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

缓动效果

要调整动画的缓动效果，请添加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="y: 200; easing: -2">-2</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -1">-1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: -0.5">-0.5</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0">0</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 0.5">0.5</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="y: 200; easing: 1">1</div></div>
        <div><div class="uk-card uk-card-default uk-padding-small" uk-parallax="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>

组件选项

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

Option Value Default Description
easing Number 1 缓动效果
target String false 影响动画持续时间的目标元素引用范围。
viewport Number 1 动画的范围取决于视扣。
media Integer, String false 处于活动状态的条件-宽度为整数（例如640）或断点（例如@s，@m，@l，@xl）或任何有效的媒体查询（例如（min-width: 900px））。

JavaScript

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

初始化

UIkit.parallax(element, options);