amp-fx-collection

<script async custom-element="amp-fx-collection" src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"></script>

用法

amp-fx-collection 元件提供預設視覺效果的集合，例如視差滾動，可透過屬性輕鬆在任何元素上啟用。

套用視覺效果

若要為元素指定視覺效果，請新增 amp-fx 屬性並設定視覺效果的值。

以下是 amp-fx-collection 支援的視覺效果

視差滾動

parallax 效果可讓元素移動，如同它比頁面內容的前景更近或更遠。當使用者捲動頁面時，元素會根據指派給 data-parallax-factor 屬性的值而更快或更慢地捲動。

data-parallax-factor (視差係數)

指定一個小數值，控制元素相對於捲動速度的捲動速度快慢

• 當使用者向下捲動頁面時，大於 1 的值會向上捲動元素 (元素捲動速度更快)。
• 當使用者向下捲動時，小於 1 的值會向下捲動元素 (元素捲動速度較慢)。
• 值為 1 時，行為與平常相同。
• 值為 0 時，實際上會使元素固定隨頁面捲動。

在此範例中，當使用者捲動頁面時，h1 元素會相對於頁面內容更快地捲動。

<h1 amp-fx="parallax" data-parallax-factor="1.5">
  A title that moves faster than other content.
</h1>

淡入

fade-in 效果可讓元素在目標元素於可視區域中顯示後淡入。

data-duration (持續時間) (選填)

這是動畫發生的持續時間。預設值為 1000ms。

在以下範例中，動畫持續時間超過 2000ms。

<div amp-fx="fade-in" data-duration="2000ms">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-easing (緩和效果) (選填)

此參數可讓您在動畫的持續時間內改變動畫的速度。預設值為 ease-in，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您可以從可用的預設值中選擇一個

• "linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00)
• "ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00)
• "ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00) (預設值)
• "ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00)
• 指定 custom-bezier() 輸入。

在以下範例中，動畫加速曲線是自訂指定的 cubic-bezier(...) 曲線。

<div amp-fx="fade-in" data-easing="cubic-bezier(0.40, 0.00, 0.40, 1.00)">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-margin-start (開始邊界) (選填)

此參數決定何時觸發定時動畫。<percent> 中指定的值表示當元素已跨越可視區域的該百分比時，應觸發動畫。預設值為 5%。

在以下範例中，動畫在元素從底部跨越可視區域的 20% 之前不會開始。

<div amp-fx="fade-in" data-margin-start="20%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

捲動時淡入

fade-in-scroll 效果可讓您在元素於可視區域內捲動時變更元素的不透明度。這會建立與捲動相關的淡入動畫。預設情況下，一旦元素完全可見，我們就不再為不透明度設定動畫。

data-margin-start (開始邊界) (選填)

此參數決定何時觸發定時動畫。<percent> 中指定的值表示當元素已跨越可視區域的該百分比時，應觸發動畫。預設值為 0%。

data-margin-end (結束邊界) (選填)

此參數決定何時停止動畫。<percent> 中指定的值表示當目標元素的指定數量可見時，動畫應已完成。預設值為 50%。

在以下範例中，<div> 在從底部跨越可視區域的 80% 時完全可見。

<div amp-fx="fade-in-scroll" data-margin-end="80%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-repeat (重複) (選填)

預設情況下，一旦元素完全可見，我們就不再為不透明度設定動畫。如果您希望不透明度隨著捲動而變化，即使元素已完全載入，請在動畫上指定此變數。

在以下範例中，動畫完全取決於捲動，且當使用者捲動時，<div> 會淡入和淡出。

<div amp-fx="fade-in-scroll" data-repeat>
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

float-in-top (向上浮現)、float-in-bottom (向下浮現)

當文件向上或向下捲動時，float-in-top 和 float-in-bottom 效果會將具有 position: fixed 的元素滑入和滑出檢視畫面。

具有 amp-fx="float-in-top" 或 amp-fx="float-in-bottom" 的元素必須具有下列 CSS 屬性

• position: fixed (固定定位)
• overflow: hidden (隱藏溢位)
• 如果是 top (頂部)，則 top: 0
• 如果是 bottom (底部)，則 bottom: 0

如果未設定其中任何一項，則不會套用效果，且會在 開發人員模式 中擲回警告。

fly-in-bottom (從底部飛入)、fly-in-left (從左側飛入)、fly-in-right (從右側飛入)、fly-in-top (從頂部飛入)

fly-in-bottom、fly-in-left、fly-in-right 和 fly-in-top 效果可讓元素的位置在進入可視區域後平移指定的量。

data-duration (持續時間) (選填)

這是動畫發生的持續時間。預設值在不同裝置之間有所不同，如下所示：在 480 px (行動裝置的最小寬度) 和 1000px (筆記型電腦螢幕寬度的最小寬度) 之間，我們會將預設持續時間縮放介於 400ms 和 600ms 之間。

以下是一些範例，可協助您更瞭解這一點

1. 螢幕寬度 - 610px，fly-in-bottom 的預設持續時間為 450ms。
2. 螢幕寬度 - 675px，fly-in-bottom 的預設持續時間為 475ms。
3. 螢幕寬度 - 740px，fly-in-bottom 的預設持續時間為 500ms。
4. 螢幕寬度 - 805px，fly-in-bottom 的預設持續時間為 525ms。
5. 螢幕寬度 - 870px，fly-in-bottom 的預設持續時間為 550ms。

如果使用者將 data-duration 的預設值覆寫為 Xms，則相同的預設值將適用於所有裝置。

data-easing (緩和效果) (選填)

此參數可讓您在動畫的持續時間內改變動畫的速度。預設值為 ease-out，即 cubic-bezier(0.40, 0.00, 0.40, 1.00)。您可以從可用的預設值中選擇一個

• "linear" - cubic-bezier(0.00, 0.00, 1.00, 1.00)
• "ease-in-out" - cubic-bezier(0.80, 0.00, 0.20, 1.00)
• "ease-in" - cubic-bezier(0.80, 0.00, 0.60, 1.00)
• "ease-out" - cubic-bezier(0.40, 0.00, 0.40, 1.00) (預設值)
• 指定 custom-bezier() 輸入。

data-fly-in-distance (飛入距離) (選填)

此參數決定要發生的平移。值以可視區域的 <percent> 指定。預設值如下

在以下範例中，元素沿 Y 軸平移了可視區域的 20%。

<div amp-fx="fly-in-bottom" data-fly-in-distance="20%">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

data-margin-start (開始邊界) (選填)

此參數決定何時觸發定時動畫。<percent> 中指定的值表示當元素已跨越可視區域的該百分比時，應觸發動畫。預設值為 5%。

組合視覺效果

開發人員也可以組合 amp-fx 預設值，以建立組合動畫。

在以下範例中，元素沿 Y 軸平移，且其不透明度在 1000ms 的持續時間內從 0 變更為 1。

<div amp-fx="fade-in fly-in-bottom" data-duration="1000ms">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

但是，有些預設值組合在一起無法產生良好的效果。在這種情況下，我們接受列出的第一個預設值，並忽略衝突的預設值，並在主控台中發出警告。

在以下範例中，元素正透過兩個衝突的預設值 parallax 和 fly-in-bottom 沿 Y 軸平移。在這種情況下，我們只允許 parallax 動畫，並忽略 fly-in-bottom 預設值。

<div amp-fx="parallax fly-in-bottom" data-parallax-factor="1.5">
  <amp-img
    width="1600"
    height="900"
    layout="responsive"
    src="https://picsum.photos/1600/900?image=1069"
  ></amp-img>
</div>

以下是不建議組合的預設值群組清單，AMP 建議您不要組合

1. parallax (視差滾動)、fly-in-top (從頂部飛入)、fly-in-bottom (從底部飛入)、
2. fly-in-left (從左側飛入)、fly-in-right (從右側飛入)、
3. fade-in (淡入)、fade-in-scroll (捲動時淡入)。

驗證

請參閱 AMP 驗證器規格中的 amp-fx-collection 規則。