AMP教學-點擊按鈕滑動回到頂部

AMP教學-點擊按鈕滑動回到頂部

在製作網頁的時候我們常常會使用到製作一個回頂部的按鈕,讓使用者可以快速回到頭部,避免滑了很長的頁面後難以捲動回到頭部。這樣的效果在平常可能是使用jQuery或JavaScript之類的來達成滑動捲回頭部,但AMP禁止使用JavaScript,因此推出了一些可做動畫的一些元件與範例,讓開發者有機會製作這類的動畫效果

目的:一開始進入畫面時 go top的按鈕隱藏,往下滑動視窗時出現按鈕,點擊按鈕後滑動回頂部,回到頂部後按鈕再度隱藏。

【回到頂部範例】

以下就參考上述的完整示範來解說,在amp中將會需要使用這兩個套件amp-position-observeramp-animation 以及amp中的動作語法

【amp-position-observer】
用於監視指定元素,並且讓其元素可以和其他AMP元件一起使用,此元件必須要和其他元件一起使用才有作用,單獨不會執行任何動作,常見的就是觸發 amp-animation
amp-position-observer 可指定觸發時機,像是開始動畫、動畫中的位置、暫停動畫等等,同時也能設定觸發距離。
例如當用戶滾動頁面時,畫面上有物件逐漸出現動作,例如網頁中的時鐘的時針旋轉。

需崁入語法

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

寫法範例

 <h3 class="target">
<a class="target-anchor" id="top"></a>
This is the target.
<amp-position-observer
on="enter:hideAnim.start; exit:showAnim.start"
layout="nodisplay">
</amp-position-observer>
</h3>

語法說明
此段是配合amp-animation使用,amp-position-observer 放在h3裡面,代表視窗有看到這段h3時回到頂部的按鈕隱藏,當畫面下滑看不見h3時則讓按鈕顯示。

這個範例裡面的 on="enter:hideAnim.start; exit:showAnim.start" ,enter代表觸發按鈕隱藏hideAnim 開始,exit代表按鈕觸發隱藏結束。
等於在畫面一開始載入(enter)時回頭部的按鈕是隱藏的,當下滑(exit)時才會逐漸浮現,觸發顯示的按鈕,因此在此項範例中,amp-position-observer是一個讓按鈕隱藏和出現的控制端。


而點擊按鈕後的滾動的效果是要使用amp裡的動作語法

 <button id="scrollToTopButton"
on="tap:top.scrollTo(duration=200)"
class="scrollToTop">top</button>

on="tap:top.scrollTo(duration=200)"
上述語法為使用200毫秒平滑移動到頂部
.scrollTo 使用平滑動畫將元素滾動到指定位置中。
duration是可選的。以毫秒為單位指定動畫的長度。如果未指定,則使用相對於低於或等於500毫秒的滾動差異的量。
position是可選的,其中之一topcenterbottom(默認top),滾動後指定元素相對於視窗的位置。

【amp-animation】
動畫屬性,利用JSON來放入動畫設定,如秒數、時間屬性(動畫曲線)、關鍵影格(keyframe)、效果、延遲、不透明度等等....
其可使用屬性和動畫眾多,僅以此次顯示和隱藏兩種動畫語法解說

同樣需崁入js語法

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


範例語法:

 <amp-animation id="showAnim" layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#scrollToTopButton",
"keyframes": [
{ "opacity": "1", "visibility": "visible" }
]
}
]
}
</script>
</amp-animation>

<amp-animation id="hideAnim" layout="nodisplay">
<script type="application/json">
{
"duration": "200ms",
"fill": "both",
"iterations": "1",
"direction": "alternate",
"animations": [
{
"selector": "#scrollToTopButton",
"keyframes": [
{ "opacity": "0", "visibility": "hidden" }
]
}
]
}
</script>
</amp-animation>

語法解釋

duration:動畫執行時間
fill:動畫填滿之意(?) 預設值為none, "forwards"(前進), "backwards"(後退), "both"(兩者), "auto"(自動)
terations:動畫重複次數,可能是數字或是 iterations(無限)
direction:動畫次序,一般為"normal"(正常), "reverse"(反向), "alternate"(交替) or "alternate-reverse"(交替反向)
animations :動作指定
selector:選擇要動畫對象id "#scrollToTopButton", 這邊選的是要浮出的按鈕
keyframes:關鍵影格動作,opacity為透明度,visibility為顯示

以上為amp版本滑動回頭部的一種方式,amp還有提供各種常見的範例與組合可供參考,往後也會挑選一些實用的範例再加以解釋於此。

參考:amp scroll_to_top

文章關鍵字:AMP AMP教學 AMP網頁 網頁技術

更多文章:

  1. AMP教學-AMP Email格式介紹
  2. Bento AMP正式釋出,AMP網頁的未來發展將會如何?
  3. AMP 2020 線上發表重點整理
  4. AMP教學-amp-img圖片
  5. AMP教學-amp-carousel 輪播