# 视差／Parallax

<p class="uk-text-lead">根据页面的滚动位置设置CSS属性的动画。</p>

## Usage-用法

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

```html
<div uk-parallax="bgy: -200">...</div>
```

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

***

## Animated properties-动画属性

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

| 选项             | 描述                        | 默认单位 | 默认开始 |
| :----------------- | :--------------------------------- | ----------------- | :------------ |
| `x`                | 在X轴方向位移                | `px`              | `0`           |
| `y`                | 在Y轴方向位移                | `px`              | `0`           |
| `bgy`              | 使背景Y方向动态变化     | `px`              | *Current*     |
| `bgx`              | 使背景X方向动态变化     | `px`              | *Current*     |
| `rotate`           | A顺时针动态变化        | `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`是相同效果。

***

## Start and end values-起始值和终止值

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

```html
<div uk-parallax="opacity: 0,1">...</div>
```

```example
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" 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; 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>
```

### 多个步骤

通过一系列使用逗号分隔的值为属性定义多个步骤。

```html
<div uk-parallax="x: 0,50,150">...</div>
```

```example
<div class="uk-height-large uk-background-cover uk-overflow-hidden uk-light uk-flex uk-flex-top" 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; 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 position-视口位置

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

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

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

</div>
```

***

## Nesting-嵌套

可以轻松地嵌套不同的视差动画。

```html
<div uk-parallax="bgx: -50">
    <div uk-parallax="x: -100, 100">...</div>
</div>
```

```example
<div class="uk-height-large uk-background-cover uk-light uk-flex uk-flex-top" 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-目标

通常，只要元素处于视口中动画就会持续。要基于另一个元素的在视口中的可见性来启动和停止动画，请使用 `target` 选项。这在使用嵌套动画时很有用。

```html
<div id="target">
    <div uk-parallax="target: #target">...</div>
</div>
```

```example
<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('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-缓动效果

要调整动画的缓动效果，请添加 `easing` 选项。值为 `0` 则以均匀的速度过渡。设为正值则开始很快逐渐减速直至动画结束，设为负值则开始缓慢并逐渐增加速度直至动画结束。

```example
<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="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>
```

***

## Colors-颜色

从一种颜色过渡到另一种颜色，可以是边框、背景或文本颜色。使用 `rgb()` 定义、颜色名称或十六进制值定义颜色。

```html
<div uk-parallax="border-color: #00f,#f00">...</div>
```

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

***

## Filters-滤镜

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

```html
<div uk-parallax="blur: 10; sepia: 100;">...</div>
```

```example
<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('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 Strokes-SVG 笔划

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

```html
<div uk-parallax="stroke: 45">
    <img src="" alt="" uk-svg>
</div>
```

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

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

***

## SVG Images-SVG 图片

视差组件可以应用于内联SVG图像的元素，如 `rect`, `circle` 和 `path`。 

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

***

## Responsive-响应式

建议使用 `vw` 或 `vh` 作为长度单位，而不是像素。视差将根据视口进行调整。

视差也只能应用于某些视口。 `media` 用可能的值之一添加选项。以像素为单位添加一个数字，例如 `640`, 或添加一个断点例如 `@s`, `@m`, `@l` 或 `@xl`。视差将显示为指定的视窗宽度和更大的视差。

```html
<div uk-parallax="media: @m"></div>
```

***

## Component options-组件选项

以下选项中的任何一个都可以应用于组件属性。用分号分隔多个选项。 [了解更多](javascript.md#component-configuration)

| 选项     | 可用值           | 默认值 | 描述               |
| :--------- | :-------------- | :------ | :------------------- |
| `easing`   | Number          | `1`     | 缓动效果     |
| `target`   | String          | `false` | 影响动画持续时间的目标元素引用范围。              |
| `viewport` | Number          | `1`     | 动画范围取决于视口(视频在界面窗口？)。    |
| `media`    | Integer, String | `false` | 处于活动状态的条件-宽度为整数（例如640）或断点（例如@s，@m，@l，@xl）或任何有效的媒体查询（例如（min-width: 900px））。 |

***

## JavaScript

了解更多关于 [JavaScript 组件](javascript.md#programmatic-use)的内容。

### 初始化

```js
UIkit.parallax(element, options);
```