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)

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)

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)

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 規則。