視覺效果的集合

amp-fx-collection 能幫我實現，所有的願望（誇張了）

今天要講的 amp-fx-collection 可以幫我們在 AMP 的世界中，輕鬆完成視覺效果；ex：視差、淡入。計劃很快支持飛入、……的更多效果。

Required Script

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

基本語法

<div amp-fx="fade-in" data-margin-start="20%"><!-- amp-fx 這 attribute ，為元素指定視覺效果 -->
    <amp-img width="1600" height="900" layout="responsive" src="https://picsum.photos/1600/900?image=1069"></amp-img>
</div>

parallax - 滾動視差

例如：

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

attribute

• data-parallax-factor
  • scrolling 時，物件會根據 這個 attribute 的值更快或更慢地滾動
  • 值為 0 及大於 0 的 number ，物件相對於 csolling 頁面時的速度
    • 0 ： 物件與頁面一起滾動
    • 大於 0 ~ 小於 1 ： 元件滾動比 scrolling 慢
    • 1 ： 正常速度
    • 大於 1 ： 元件滾動比 scrolling 快

fade-in - 淡入

例如：

<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>

attribute

• data-duration

  • 非必填，動畫發生的持續時間。 預設值為1000毫秒。

• data-easing

  • 非必填，預設為 cubic-bezier(0.40, 0.00, 0.40, 1.00)
  • linear - 相當於 cubic-bezier（0.00,0.00,1.00,1.00）
  • easy-in-out - 相當於 cubic-bezier（0.80,0.00,0.20,1.00）
  • ease-in - 相當於 cubic-bezier（0.80,0.00,0.60,1.00） （預設值）
  • ase-out - 相當於 `cubic-bezier（0.40,0.00,0.40,1.00）
  • 指定 custom-bezier()

• data-margin-start

  • 非必填，何時觸發動畫，預設為 5％
  • 值表示當物件超過頁面 viewposrt 的百分比多少時應觸發動畫。

fade-in-scroll - 隨捲動頁面而淡入

預設情況下，一旦物件完全可見，我們就不再為不透明度設置動畫。

基本用法：

<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>

attribute

• data-repeat

  • 非必填，使物件即使已完全 onloaded ，仍能變更透明度

• data-margin-start

  • 非必填，何時觸發定時動畫，預設為 0％。
  • 值表示當物件超過頁面 viewposrt 的百分比多少時應觸發動畫。

• data-margin-end

  • 非必填，何時觸發定時動畫，預設為 50％。
  • 值表示當物件超過頁面 viewposrt 的百分比多少時應停止動畫（動畫已完成）。

fly-in-bottom, fly-in-left, fly-in-right, fly-in-top

attribute

• data-duration

  • 非必填，動畫發生的持續時間。默認值因 device 的寬度而異，詳細請看官網這

• data-easing

  • 非必填，預設為 cubic-bezier(0.40, 0.00, 0.40, 1.00)
  • 其他設定同 fade-in 中的一樣

• data-margin-start

  • 非必填，何時觸發動畫，預設為 5％
  • 值表示當物件超過頁面 viewposrt 的百分比多少時應觸發動畫。

• data-fly-in-distance

  • 非必填，要進行的轉換。
  • 值表示當物件超過頁面 viewposrt 的百分比多少時應觸發動畫。默認值如下：

結合預設

例如：

<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-top 、 fly-in-bottom
• fly-in-left 、 fly-in-right
• fade-in 、 fade-in-scroll

參考來源：

• AMP 官網
• AMP By Example