# 視差/Parallax 依賴于頁面滾動條位置的動態 CSS 特性。 ## 用法 要使用這個組件，需要添加 `data-uk-parallax` 屬性到容器元素。并為每個你想要使之動態變化的 CSS 屬性添加對應的選項值。注意 此組件需要額外添加 `parallax.js` 文件，在`js/components`文件夾中。  ### Markup ``` <div data-uk-parallax="{bg: '-200'}">...</div> ``` * * * ## 選項 UIkit 提供了一系列的選項，你可以把它們添加到 `data-uk-parallax` 屬性中： | 選項 | 描述 | | --- | --- | | `x` | 以像素為單位的 X 軸方向位移。 | | `xp` | 以百分比為單位的 X 軸方向位移。 | | `y` | 以像素為單位的 Y 軸方向位移。 | | `yp` | 以百分比為單位的 Y 軸方向位移。 | | `bg` | 使背景圖片動態變化。 | | `bgp` | 以百分比為單位的背景圖片動態變化。 | | `rotate` | 以度為單位的順時針動態變化。 | | `scale` | 縮放的動態變化 | | `color` | 色彩的動態變化（需要設置起始值和終止值） | | `background-color` | 背景色彩的變化（需要設置起始值和終止值） | | `border-color` | border 色彩的變化（需要設置起始值和終止值） | | `opacity` | 透明度的變化 | 注意 你可以基礎性地使任意只有一值的 CSS 屬性動態變化，比如寬度和高度，直接添加到屬性中即可。 ### Markup ``` <div data-uk-parallax="{y: '-200', opacity: '0'}">...</div> ``` * * * ### 起始值和終止值 屬性通常由當前值變化到你設置的目標值。然而，你還可以自己定義一個起始值。這將通過傳遞字符串到包含由逗號隔開的兩個值的選項中來實現。 注意 某些屬性，比如顏色，必須要有起始值和終止值。 #### Markup ``` <div data-uk-parallax="{x: '-100,100', 'background-color': '#EBF7FD,#FFF1F0'}">...</div> ``` * * * ## 嵌套的動畫/Nested animation 為前提的元素使用不同的動畫是很簡單的事情。只需在視差容器中再創建一個容器，并在新的 `data-uk-parallax` 屬性中添加你的選項即可。 ### Example  ### Markup ``` <div data-uk-parallax="{bg: -200}"> <div data-uk-parallax="{opacity: '0,1', scale: '0,1'}">...</div> </div> ``` * * * ## 目標選項/Target Option 通常，視差動畫從元素進入視口開始，到離開視口結束。開始和終止動畫基于另一個元素在視口中的可見性，使用 `target` 選項進行設置。在使用嵌套動畫時會很有幫助。 ### Example  ### Markup ``` <div id="target-id">...</div> <div data-uk-parallax="{target: '#target-id'}">...</div> ``` * * * ## 速度/Velocity 添加 `velocity` 選項，調整動畫的緩動效果。 ### Example  ### Markup ``` <div data-uk-parallax="{velocity: '0.5'}"> ... </div> ``` * * * ## 視口/Viewport 使用 `viewport` 選項，動畫持續時間將被調整。其值為 `1` 或 `false` 時，視差動畫從元素進入視口開始，到離開視口結束。將其設置為 `0.5`，如下面的例子，動畫只在元素出現的前半個視口中發生。 ### Example  ### Markup ``` <div data-uk-parallax="{viewport: '0.5'}">...</div> ``` * * * ## JavaScript 選項 | 選項 | 可用值 | 默認值 | 描述 | | --- | --- | --- | --- | | `velocity` | float | 0.5 | 頁面滾動時，動畫的速度 | | `target` | mixed | false | 關于動畫持續時間的元素尺寸參考/Element dimension reference for animation duration. | | `viewport` | float (0 to 1) | false | 依賴于視口的動畫范圍 | | `media` | integer / string | false | 啟用視差效果的視口寬度條件（比如640px），或CSS媒體查詢 | ### 手動初始化 ``` var parallax = UIkit.parallax(element, { /* options */ }); ```