跳至主要內容

文件

視差效果

根據文件的滾動位置，對 CSS 屬性進行動畫處理。

用法

要應用此組件，請將 uk-parallax 屬性新增至任何元素。使用以下其中一個選項來對應的 CSS 屬性進行動畫處理。

選項 描述 值 起始值
x 動畫 translateX。 長度 0
y 動畫 translateY。 長度 0
bgy 動畫背景 Y 位置。 長度 初始
bgx 動畫背景 X 位置。 長度 初始
rotate 動畫順時針旋轉。 度 0
scale 動畫縮放。 數字、長度 1
color 動畫顏色 顏色 初始
background-color 動畫背景顏色 顏色 初始
border-color 動畫邊框顏色 顏色 初始
opacity 動畫透明度。 數字 初始
blur 動畫模糊濾鏡。 px 0
hue 動畫色相旋轉濾鏡。 度 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>

標題

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

起始停止點

若要設定自訂起始值，請使用逗號分隔的兩個值建立另一個動畫停止點。

<div uk-parallax="opacity: 0,1">…</div>

標題

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

標題

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('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="x: 0,50 10%,150 50%">…</div>

標題

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

標題

<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" uk-parallax="y: 100,0">Headline</h1>

</div>

目標

動畫會根據元素在視窗中的位置開始和停止。若要根據另一個元素的視窗可見性開始和停止動畫，請使用 target 選項。當使用嵌套動畫時，這會很有幫助。

<div id="target">
    <div uk-parallax="target: #target">…</div>
</div>

標題

<div id="test-target" 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" 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('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('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>

標題

<div id="test-color" class="test-color uk-height-large uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; background-color: yellow,white; border-color: #00f,#f00;" 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; start: 100%; end: 100%; color: #0f0;">Headline</h1>

</div>

濾鏡

CSS 濾鏡是在頁面上的任何元素新增圖形效果的簡單方法。雖然它們對於某些瀏覽器仍然是實驗性功能，但只要您的可用性不受影響，就可以安全地使用它們。使用視差效果組件，您可以動態變更元素上濾鏡的數量。

<div uk-parallax="blur: 10; sepia: 100;">…</div>

標題

<div id="test-filter" class="uk-height-large uk-background-cover uk-overflow-hidden uk-flex" uk-parallax="start: 100%; end: 100%; 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; start: 100%; end: 100%; blur: 0,10;">Headline</h1>

</div>

SVG 筆劃

視差效果組件可用於動畫 SVG 筆劃。效果看起來像是 SVG 筆劃在您眼前繪製。SVG 影像必須作為內嵌 SVG 注入到標記中。這可以手動完成，也可以使用SVG 組件完成。由於 SVG 組件會在影像元素之後注入 SVG，因此必須將 uk-parallax 屬性新增至父元素。

<div uk-parallax="stroke: 45">
    <img src="" width="" height="" alt="" uk-svg>
</div>
<div class="uk-text-center" uk-parallax="start: 100%; end: 100%; stroke: 100%;">
    <img src="images/strokes.svg" width="350" height="340" alt="" uk-svg>
</div>

注意建議使用百分比單位 %，這樣您就不必知道筆劃的確切長度。

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>

黏性視差效果

與黏性定位組件一起使用，您可以實現複雜的黏性視差效果。請在黏性視差效果的測試中查看一些範例。

組件選項

這些選項中的任何一個都可以應用於組件屬性。以分號分隔多個選項。瞭解更多

選項 值 預設值 描述
easing 數字 1 滾動期間的動畫緩和效果
target CSS 選擇器 false 動畫持續時間的元素尺寸參考。
start 長度 0 開始偏移量。該值可以採用 vh、% 和 px 為單位。它支援基本的數學運算符 + 和 -。預設值 0 表示目標的頂部邊框和視窗的底部邊框相交。
end 長度 0 結束偏移量。該值可以採用 vh、% 和 px 為單位。它支援基本的數學運算符 + 和 -。預設值 0 表示目標的底部邊框和視窗的頂部邊框相交。
media 布林值、數字、字串 false 活動狀態的條件 - 作為整數的寬度（例如 640）或斷點（例如 @s、@m、@l、@xl）或任何有效的媒體查詢（例如 (min-width: 900px)）。

JavaScript

瞭解更多關於JavaScript 組件。

初始化

UIkit.parallax(element, options);