iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Modern Web

AMP系列 第 29

AMP(Lession 29) - 視覺效果的集合

視覺效果的集合

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 的百分比多少時應觸發動畫。默認值如下:
AMP-FX VALUE MOBILE TABLET DESKTOP
fly-in-bottom 25% 25% 33%
fly-in-top 25% 25% 33%
fly-in-left 100% 100% 100%
fly-in-right 100% 100% 100%

結合預設

例如:

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

但是以下幾個請 不要 做結合

  • parallaxfly-in-topfly-in-bottom
  • fly-in-leftfly-in-right
  • fade-infade-in-scroll

參考來源:


上一篇
AMP(Lession 28) - 視覺上呈現出飛毯效果
下一篇
AMP(Lession 30) - 結語
系列文
AMP30

尚未有邦友留言

立即登入留言