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: 200x: 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>

止损位置

动画停止可以由值和位置定义。位置必须以百分比设置。如果您不指定停止的位置,则将其放置在它之前的位置和之后的位置之间的中间。

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

开始和结束

使用startend选项可以调整动画持续时间。该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('/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, circlepath

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

响应式

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

视差也只能应用于某些视口。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);