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 像素 (行動裝置的最小寬度) 和 1000 像素 (筆記型電腦螢幕寬度的最小寬度) 之間，我們會將預設持續時間縮放介於 400 毫秒 和 600 毫秒 之間。

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

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

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

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 軸平移，並且其不透明度在 1000 毫秒 的持續時間內從 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 規則。