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 像素 (行動裝置的最小寬度) 和 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 的預設值覆寫為 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 軸平移，並且其不透明度會在 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 規則。