視差滾動

視埠單位

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

起始和結束點

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

多個停止點

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

停止點位置

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

目標

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

起始和結束

0 / 0
100% / 100%
30vh / 30vh
100% + 100 / 100% + 100

緩動

-3
-2
-1
-0.5
0
0.5
1
2
3

顏色

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

濾鏡

標題

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

SVG 描邊

JavaScript 選項

選項 值 預設值 描述
easing 數字 1 滾動時的動畫緩動效果。
target CSS 選擇器 false 動畫持續時間的元素尺寸參考。
start 長度 0 起始偏移量。值可以是 vh、% 和 px。它支援基本的數學運算子 + 和 -。預設值 `0` 表示目標的頂部邊框與視埠的底部邊框相交。
end 長度 0 結束偏移量。值可以是 vh、% 和 px。它支援基本的數學運算子 + 和 -。預設值 `0` 表示目標的底部邊框與視埠的頂部邊框相交。
media 布林值、數字、字串 false 啟用狀態的條件 - 作為整數的寬度 (例如 640) 或一個斷點 (例如 @s、@m、@l、@xl)。

動畫屬性

您可以使用逗號分隔的值列表來定義多個動畫停止點。(例如 x: 0,50,150)。停止點可以由一個值和一個位置定義。 如果您沒有指定停止點的位置，它會被放置在它前面和後面停止點的中間。

選項 預設單位 描述
x px 動畫 translateX。
y px 動畫 translateY。
bgy px 動畫背景圖片 (y 軸)。
bgx px 動畫背景圖片 (x 軸)。
rotate deg 動畫順時針旋轉。
scale 動畫縮放。
color 動畫顏色 (需要起始和結束值)。
background-color 動畫背景顏色 (需要起始和結束值)。
border-color 動畫邊框顏色 (需要起始和結束值)。
opacity 動畫透明度。
blur px 動畫模糊濾鏡。
hue deg 動畫色相旋轉濾鏡。
grayscale % 動畫灰階濾鏡。
invert % 動畫反轉濾鏡。
saturate % 動畫飽和度濾鏡。
sepia % 動畫棕褐色濾鏡。
stroke 動畫 SVG 圖片內的描邊。