Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

本頁面由 Cloud Translation API 翻譯而成。

賞心悅目的標準 AMP 網頁

AMP 可讓您輕鬆建立可靠、回應式、高效的網頁。AMP 可讓您建立常見的網站互動，不必編寫 JavaScript。amp.dev 網站提供預先設計好的快速入門範本。

建構項目

在這個程式碼研究室中，您會建立完整、互動式且美觀的 AMP 網頁，其中含有許多與 AMP 功能及擴充元件相關的 AMP 網頁：

回應式導覽
全頁主頁橫幅封面圖片
回應式圖片
含自動播放的影片
嵌入影片，例如 Instagram
動作和選取器
與 amp-bind 的資料繫結
amp-fx-collection 和 amp-animation 的視覺效果

軟硬體需求

新世代網路瀏覽器
Node.js 和文字編輯器，或存取 CodePen 或類似的線上遊樂場
HTML、CSS、JavaScript 和 Google Chrome 開發人員工具的基本知識

提供內容的工具

我們會使用 Node.js 執行本機 HTTP 伺服器來提供 AMP 網頁。請瀏覽 Node.js 網站以瞭解如何安裝。

我們選擇透過放送內容 (提供以 Node.js 為基礎的靜態內容伺服器為主) 提供的工具。如要安裝，請執行下列指令：

npm install -g serve

從 amp.dev 下載範本

AMP 範本是一組快速啟動的 AMP 範本和元件存放區，可協助您快速建立現代化的回應式 AMP 網頁。

造訪 AMP 範本並下載「簡單年度報導」的代碼。

執行範本程式碼

擷取 ZIP 檔案內容。

在 article 資料夾中執行 serve 指令，以在本機提供檔案。

透過瀏覽器造訪 http://localhost:5000/templates/article.amp.html。(視 serve 的版本而定，通訊埠可能為 3000 或不同的號碼。請前往主控台查看確切的地址)

當我們開啟 Chrome 開發人員工具時，也會同時切換裝置模式。

移除範本程式碼

目前，我們建立了功能最齊全的 AMP 網頁，不過本程式碼研究室的目的在於協助您學習和練習，所以...

刪除「<body></body>」中的所有資料。

我們現在離開了一個空白頁面，上面只有一些樣板程式碼：

在這個程式碼研究室中，您會為這個空白網頁加入許多元件，並且以更多功能重新建立範本。

AMP 網頁是 HTML 網頁，內含額外的代碼且對於一些可靠成效的限制。

AMP 網頁中的多數標記都是一般的 HTML 標記，但部分 HTML 標記會替換為 AMP 專屬標記。這些自訂元素稱為 AMP HTML 元件，可輕鬆且有效地實作常見的模式。

最簡單的 AMP HTML 檔案內容如下 (有時稱為 AMP 模版介面)：

<!doctype html>
<html ⚡>
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

查看您在設定期間建立的空白網頁程式碼，包含這個樣板和一些新增項目。值得注意的是，一個 <style amp-custom> 標記內含許多壓縮後的 CSS。

AMP 不會設計任何設計，也不會強制套用特定樣式組合。大多數的 AMP 元件都具備基本的基本樣式。網頁作者必須自行提供自訂 CSS。這就叫做<style amp-custom>。

但 AMP 範本提供了自行設計、跨瀏覽器和回應式設計的 CSS 樣式，可協助您快速建構出優雅的 AMP 網頁。您下載的範本程式碼包含 <style amp-custom>. 中具有參考資訊的 CSS 樣式

首先，請重新加入我們從範本中移除的部分元件，為網頁建立殼層，包括導覽選單、網頁標題圖片和標題。

我們會從 AMP 起始 UI 元件頁面取得說明，但不會深入探討其實作細節。程式碼研究室的後續步驟將提供許多機會。

請前往 https://ampstart.com/components#navigation，將您為 RESPONSIVE MENUBAR 提供的 HTML 程式碼複製並貼到網頁的 body 中。

AMP Start 提供的程式碼包含必要的 HTML 和 CSS 類別結構，方便您在網頁上導入回應式導覽列。

馬上試試：調整視窗大小，瞭解視窗在不同螢幕尺寸中的反應。

這段程式碼使用 CSS 媒體查詢，以及 amp-sidebar 和 amp-accordion AMP 元件。

新增主頁橫幅和標題

此外，AMP Start 也提供了現成的摘要，供你使用美觀的回應式主頁橫幅與標題。

請前往 https://ampstart.com/components#media，將「完整頁面英雄」所提供的 HTML 程式碼複製並貼到您的程式碼中，緊貼在 body. 中的  comment 後方

立即更新圖片和標題。

如您所注意到，程式碼片段中有兩個 amp-img 標記。一個用於較小的寬度，且會指向低解析度的圖片，另一個則適用於較大的螢幕。由於 AMP 支援所有 AMP 元素，這些屬性會自動根據 media 屬性進行切換。

將 src、width 和 height 更新為不同圖片，並將標題更新為「太平洋西北地區最美的健行者」，方法是將現有的 <figure>...</figure> 替換為：

<figure class="ampstart-image-fullpage-hero m0 relative mb4">
    <amp-img width="600" height="900" layout="responsive" src="https://unsplash.it/600/900?image=1003" media="(max-width: 415px)"></amp-img>
    <amp-img height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003" media="(min-width: 416px)"></amp-img>
    <figcaption class="absolute top-0 right-0 bottom-0 left-0">
      <header class="p3">
        <h1 class="ampstart-fullpage-hero-heading mb3">
        <span class="ampstart-fullpage-hero-heading-text">
          Most Beautiful Hikes in the Pacific Northwest
        </span>
      </h1>
        <span class="ampstart-image-credit h4">
        By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
      </span>
      </header>
      <footer class="absolute left-0 right-0 bottom-0">
        <a class="ampstart-readmore py3 caps line-height-2 text-decoration-none center block h5" href="#content">Read more</a>
      </footer>
    </figcaption>
</figure>

現在讓我們看看該網頁：

摘要

您建立了專頁的殼層，包括回應式導覽、主頁橫幅和標題。
您進一步瞭解 AMP 範本，並利用 AMP Start UI 元件快速建立網頁殼層。

這個部分的完整程式碼請見：http://codepen.io/aghassemi/pen/RpRdzV

在本節中，我們將在回應式網頁中加入回應式圖片、影片、嵌入內容和部分文字。

加入 main 元素來代管網頁內容。我們會在 body: 結尾加入這個代碼

<main id="content">

</main>

新增標題和段落

在 main 內部增加以下內容：

<h2 class="px3 pt2 mb2">Photo Gallery</h2>
<p class="ampstart-dropcap mb4 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

由於 AMP 只是 HTML，因此除了 CSS 類別名稱以外，這個程式碼沒有其他特殊功能。什麼是 px3、mb2 和 ampstart-dropcap？他們來自何處？

這些類別「不屬於」AMP HTML 的一部分。AMP Start 範本使用 Basscss 提供低層級的 CSS 工具包，並新增 AMP 專用類別。

在這個程式碼片段中，px3 和 mb2 由 Basscss 定義，因此會分別轉譯為 padding-left-right 和 margin-bottom。「ampstart-dropcap」是由 AMP Start 所提供，並且會放大段落的第一個字母。

您可以前往 http://basscss.com/ 和 https://ampstart.com/components 查看這些預先定義的 CSS 類別說明文件。

我們來看看網頁的呈現效果：

新增圖片

在 AMP 中製作回應式網頁非常簡單。在多數情況下，讓 AMP 元件保持回應式狀態就像加入 layout="responsive" 屬性一樣簡單。與 HTML img 標記類似，amp-img 也支援 srcset 為不同的可視區域寬度和像素密度指定不同的圖片。

將 amp-img 新增至 main：

<amp-img 
  layout="responsive" width="1080" height="720"
  srcset="https://unsplash.it/1080/720?image=1043 1080w, https://unsplash.it/720/480?image=1043 720w" 
  alt="Photo of mountains and trees landscape">
</amp-img>

使用此程式碼，我們指定 layout="responsive" 並提供 width 和 height.，以建立回應式圖片

使用回應式版面配置時，為何必須指定寬度和高度？

有兩個原因：

AMP 會使用寬度和高度來計算長寬比，並根據寬度調整而維持正確的高度。
AMP 會對所有元素執行靜態大小調整作業，以確保使用者體驗良好 (網頁不會發生跳轉的情形)，並在下載資源前確認每個元素的大小和位置。

現在讓我們看看該網頁：

新增自動播放的影片

AMP 支援許多影片播放器，例如 YouTube 和 Vimeo。AMP 在 amp-video 擴充元件下有自己的 HTML5 video 元素版本。部分影片播放器 (包括 amp-video 和 amp-youtube) 也支援行動裝置自動播放自動播放功能。

與「amp-img」類似，amp-video可以隨著layout="responsive"加入而變成「回應式」

讓我們將自動播放影片加入我們的網頁。

將其他段落和下列 amp-video 元素新增至 main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-video 
  layout="responsive" width="1280" height="720"
  autoplay controls loop
  src="https://storage.googleapis.com/ampconf-76504.appspot.com/Bullfinch%20-%202797.mp4">
</amp-video>

讓我們看看：

新增嵌入內容

AMP 為許多第三方嵌入內容 (例如 Twitter 和 Instagram) 提供了延伸元件。針對沒有 AMP 元件的嵌入，一律會顯示 amp-iframe。

讓我們將 Instagram 嵌入新增到我們的專頁。

與 amp-img 和 amp-video 不同，amp-instagram 並不是內建元件。匯入程式碼的標記「必須」明確加入 AMP 網頁的 head 中，才能使用該元件。

我們採用的 AMP Start 公式化工具有數個匯入指令碼標記。請在 head 代碼的開頭找出這些代碼，並確定包含下列匯入指令碼：

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

將其他段落和下列 amp-instagram 元素新增至 main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>
    
<amp-instagram
   layout="responsive" width="566" height="708"
   data-shortcode="BJ_sPxzAGyg">
</amp-instagram>

讓我們看看：

目前可能有足夠的內容。

摘要

您已經瞭解 AMP 的回應式元件。
您已新增不同類型的媒體和文字內容。

這個部分的完整程式碼請見：http://codepen.io/aghassemi/pen/OpXGoa

目前我們僅為網頁建立了靜態內容。本節將使用輪轉介面、燈箱和 AMP 動作等元件來建立互動式相片庫。

雖然 AMP 不支援自訂 JavaScript，但仍會顯示數個構成區塊來接收及處理使用者動作。

新增相片輪轉介面

為網頁提供以相片為主的 AMP 網頁後，每張圖片都無法呈現最佳使用者體驗。幸好，我們可以使用 amp-carousel 建立橫向滑動的投影片。

首先，請確認 amp-carousel 的指令碼標記已包含在 head 中：

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

現在，我們為 slides 類型的 amp-carousel 回應式設計加入main:

<p class="my2 px3">Vivamus viverra augue libero, vitae dapibus lectus accumsan eget. Pellentesque eget ipsum purus. Maecenas leo odio, ornare nec ex id, suscipit porta ipsum. Ut fringilla semper cursus.</p>

<amp-carousel 
  layout="responsive" width="1080" height="720"
  type="slides">

    <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
    <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>
</amp-carousel>

type="slides" 可確保使用者一次只看見一張圖片，而且可以滑動瀏覽。

對於輪轉介面中的圖片，我們採用 layout="fill"，因為投影片輪轉介面一律會根據子元素填滿其大小，因此您無需指定其他寬度和高度不同的版面配置。

現在就試試看吧！

新增縮圖輪轉介面

現在，讓我們為這些圖片的縮圖新增水平捲動的容器。我們會再次使用 <amp-carousel>，但不會套用 type="slides"，且採用固定高度的版面配置。

在上一個 amp-carousel 元素後方加入以下內容。

<amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

</amp-carousel>

請注意，對於縮圖，我們只使用 layout="fixed" 和同一張圖片的低解析度版本。

讓我們看看：

在使用者輕觸縮圖時變更圖片

為達成這個目的，我們必須將事件 (例如 tap) 和動作 (例如變更投影片) 連結在一起。

event：我們可以使用 on 屬性在元素上安裝事件處理常式，而且所有元素都支援 tap 事件。

action：amp-carousel 會顯示 goToSlide(index=INTEGER) 動作，而我們在每張縮圖的輕觸事件處理常式中就會呼叫該動作。

瞭解事件和動作後，請將這些項目相互連結。

首先，我們必須為投影片輪轉介面指定 id，方便系統透過縮圖上的輕觸事件處理常式來參照。

修改現有程式碼，在投影片輪轉介面 (第一個) 中加入 id 屬性：

<amp-carousel 
  id="imageSlides"
  type="slides"

  ....

現在，請安裝每個事件處理常式 (在每一個「thumbnail」圖片上加上 on="tap:imageSlides.goToSlide(index=<slideNumber>)"))。

<amp-img on="tap:imageSlides.goToSlide(index=0)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=1)" role="button" tabindex="1" layout="fixed" ...
<amp-img on="tap:imageSlides.goToSlide(index=2)" role="button" tabindex="1" layout="fixed" ...
...

請注意，我們也必須為其提供 tabindex 並設定 ARIA role，以便使用。

就行了！現在，輕觸每一張縮圖，即可在投影片輪轉介面中顯示對應的圖片。

醒目顯示使用者輕觸縮圖的縮圖

我們可以這麼做嗎？似乎沒有任何動作會變更要透過輕觸事件處理常式呼叫的元素的 CSS 類別。那麼，我們該如何突顯縮圖？

<amp-selector>。

amp-selector 與我們目前使用的元件不同。這不是簡報元件，因為它不會影響網頁的版面配置，而是讓 AMP 網頁瞭解使用者所選擇的「選項」。

「amp-selector」的功用相當簡單，但功能強大：

amp-selector 可包含任何任意 HTML 元素或 AMP 元件。
amp-selector 的子系元素，只要有 option=<value> 屬性，就會成為選項。
當使用者輕觸某個選項時，amp-selector 只會為該元素新增 selected 屬性 (並在單選模式中將其從其他選項中移除)。
您可使用 CSS 屬性選取器指定 selected 屬性，藉此在自訂 CSS 中為所選元素設定樣式。

讓我們看看這一點如何幫助我們完成手邊的工作。

將 amp-selector 的指令碼標記新增至 head：

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

將縮圖輪轉介面轉成 amp-selector
加入 option=<value> 屬性，為每個縮圖加入選項。
新增 selected 屬性，即可選取第一個縮圖。

<amp-selector>

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected on="tap:imageSlides.goToSlide(index=0)" ...
      
    <amp-img option=1 on="tap:imageSlides.goToSlide(index=1)" ...

    ...

  </amp-carousel>

</amp-selector>

現在，我們須新增樣式來醒目顯示所選縮圖。

透過 AMP Start 建立最小的 CSS 公式化後，在 <style amp-custom> 中加入下列自訂 CSS：

<style amp-custom>
...

/* low opacity for non-selected thumbnails */
amp-selector amp-img[option] {
  opacity: 0.4;
}

/* normal opacity for the selected thumbnail */
amp-selector amp-img[option][selected] {
  opacity: 1;
}

</style>

讓我們看看：

看起來沒問題，但您發現了錯誤嗎？

如果使用者滑動投影片，選取的縮圖不會隨之更新。如何將目前投影片的內容與選取的縮圖繫結？

下一節將說明

摘要

您已經瞭解不同類型的輪轉介面和使用方式。
您使用 AMP 動作和事件，在使用者輕觸縮圖圖片時，變更圖片輪轉介面中的可見投影片。
amp-selector

這個部分的完整程式碼請見：http://codepen.io/aghassemi/pen/gmMJMy

在本節中，我們將使用 amp-bind 改善上一個部分的圖片庫互動程度。

什麼是 `amp-bind`？

AMP 核心元件 amp-bind 可讓您使用資料繫結和運算式建立自訂互動功能。

「amp-bind」含有三個主要部分：

州/省
繫結
更改

State 是一種應用程式狀態變數，包含單一值到複雜的資料結構等。所有元件都可讀取並寫入這個共用變數。

繫結是一種可將狀態與 HTML 屬性或元素內容相連結的運算式。

「變動」是指某些使用者動作或事件來變更狀態值的動作。

amp-bind 的異動會在發生異動時開始：系統會通知具有該狀態繫結的所有元件，並自動更新元件以反映新狀態。

觀看實際使用教學！

使用 `amp-bind` 重新導入圖片庫

我們先前使用 AMP 動作 (例如 goToSlide()) 來比對整張圖片的輪轉介面輪轉介面，並在縮圖圖片中加入 tap 事件，並使用 amp-selector 來醒目顯示所選縮圖。

讓我們看看如何使用 amp-bind 資料繫結方法，重新實作這個程式碼。

但在開始編寫程式碼之前，我們先設計方法：

1. 現狀為何？

在此案例中，情況相當簡單，目前我們所關注的值只是目前的投影片編號，所以 selectedSlide 是我們的州/省。

2. 什麼是我們的繫結？

selectedSlide變更時需要變更哪些項目？

完整圖片輪轉介面的 slide 顯示：

<amp-carousel [slide]="selectedSlide" ...

「amp-selector」中的「selected」也必須變更。這將修正我們在上一節中發現的錯誤。

<amp-selector [selected]="selectedSlide" ...

3. 我們的異動內容為何？

selectedSlide何時需要變更？

當使用者滑動至完整圖片輪轉介面中的新投影片時，只要滑動：

<amp-carousel on="slideChange:AMP.setState({selectedSlide:event.index})" ...

當使用者選取縮圖時：

<amp-selector on="select:AMP.setState({selectedSlide:event.targetOption})" ...

我們使用 AMP.setState 來觸發排列作業，這表示我們不再需要縮圖上的 on="tap:imageSlides.goToSlide(index=n)" 程式碼！

讓我們一起完成所有事情：

將 amp-bind 的指令碼標記新增至 head：

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

以新方法取代現有的圖片庫程式碼：

<amp-carousel [slide]="selectedSlide" on="slideChange:AMP.setState({selectedSlide:event.index})" type="slides" id="imageSlides" layout="responsive" width="1080" height="720">

  <amp-img src="https://unsplash.it/1080/720?image=1037" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1038" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1039" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1040" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1041" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1042" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1043" layout="fill"></amp-img>
  <amp-img src="https://unsplash.it/1080/720?image=1044" layout="fill"></amp-img>

</amp-carousel>


<amp-selector [selected]="selectedSlide" on="select:AMP.setState({selectedSlide:event.targetOption})">

  <amp-carousel layout="fixed-height" height="78" class="mt1">

    <amp-img option=0 selected src="https://unsplash.it/108/72?image=1037" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=1 src="https://unsplash.it/108/72?image=1038" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=2 src="https://unsplash.it/108/72?image=1039" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=3 src="https://unsplash.it/108/72?image=1040" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=4 src="https://unsplash.it/108/72?image=1041" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=5 src="https://unsplash.it/108/72?image=1042" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=6 src="https://unsplash.it/108/72?image=1043" layout="fixed" width="108" height="72"></amp-img>
    <amp-img option=7 src="https://unsplash.it/108/72?image=1044" layout="fixed" width="108" height="72"></amp-img>

  </amp-carousel>

</amp-selector>

我們來測試一下吧。輕觸縮圖，圖片投影片就會隨之改變。只要滑動圖片投影片，醒目顯示的縮圖就會改變。

在圖片庫中新增文字

我們已定義並處理目前投影片上的狀態。現在我們可以輕鬆提供其他繫結，以根據目前的投影片編號來更新其他資訊。

讓我們在圖片庫中新增「圖片 x/y/」圖片。

在投影片輪轉介面元素上方加入下列程式碼：

<div class="px3">Image <span [text]="1*selectedSlide + 1">1</span> of 8</div>

這次我們使用 [text]= 繫結至元素的內部文字，而不會繫結至 HTML 屬性。

我們來試試吧！

摘要

您已經學習到 amp-bind。
您使用 amp-bind 導入了更完善的圖片庫版本。

這個部分的完整程式碼請見：http://codepen.io/aghassemi/pen/MpeMdL

在本節中，我們將使用兩項新功能在網頁中加入動畫。

在名稱中加入視差效果

amp-fx-collection 是一種擴充功能，可提供一系列預設視覺特效，例如在視差元素上輕鬆啟用視差功能。

視差效應，當使用者捲動網頁時，元素會根據被指派的屬性值，捲動或加快捲動速度。

如要啟用視差效果，只要在任何 HTML 或 AMP 元素中加入 amp-fx="parallax" data-parallax-factor="<a decimal factor>" 屬性即可。

大於 1 的因子值可讓元素在使用者向下捲動時更快捲動。
因子值小於 1 時，當使用者下移網頁時，元素捲動的速度就會變慢。

讓我們把 1.5 倍的視差加到我們的網頁標題中，並看看它的外觀！

將 amp-fx-collection 的指令碼標記新增至 head：

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

接著，找出程式碼中現有的標題標題元素，然後將 amp-fx="parallax" and data-parallax-factor="1.5" 屬性加到元素中：

<header amp-fx="parallax" data-parallax-factor="1.5" class="p3">
  <h1 class="ampstart-fullpage-hero-heading mb3">
    <span class="ampstart-fullpage-hero-heading-text">
      Most Beautiful Hikes in the Pacific Northwest
    </span>
  </h1>
  <span class="ampstart-image-credit h4">
    By <a href="#" role="author" class="text-decoration-none">D.F. Roy</a>,<br> January 14, 2017
  </span>
</header>

讓我們看看結果：

標題的捲動速度比網頁的其他部分更快。太棒了！

在網頁中新增動畫

amp-animation 這項功能可將 Web Animals API 導入 AMP 網頁。

在本節中，我們將使用 amp-animation 來為封面圖片建立些微的放大效果。

將 amp-aniification 的指令碼標記新增至 head：

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

現在，我們必須定義動畫及其套用的目標元素。

在頂層 amp-animation 標記內，動畫定義為 JSON。

請將下列程式碼直接插入網頁中 body 開頭標記的下方。

<amp-animation trigger="visibility" layout="nodisplay">
    <script type="application/json">
      {
        "target": "heroimage",
        "duration": 30000,
        "delay": 0, 
        "fill": "forwards",
        "easing": "ease-out",
        "keyframes": {"transform":  "scale(1.3)"}
      }
      </script>
</amp-animation>

這段程式碼定義動畫，播放時不會延遲 30 秒，並將圖片比例放大 30%。

我們定義了正向 fill，讓圖片在動畫結束後保持放大。target 是動畫所套用元素的 HTML id。

讓我們將 id 新增至網頁中的主角圖片元素，讓 amp-animation 可對其採取動作。

在程式碼中找出現有的主頁橫幅 (包含 layout="fixed-height" 的高解析度圖片)，然後將 id="heroimage" 新增至 amp-img 標記。
為了簡化程序，請同時刪除 media="(min-width: 416px)" 並移除其他低解析度的 amp-img，這樣就不用再對 amp 動畫進行多個動畫和媒體查詢。

<figure class="ampstart-image-fullpage-hero m0 relative mb4">

    <amp-img id="heroimage" height="1800" layout="fixed-height" src="https://unsplash.it/1200/1800?image=1003"></amp-img>

    <figcaption class="absolute top-0 right-0 bottom-0 left-0">

...

您可能會注意到，縮放圖片會導致圖片溢位到父項，因此必須藉由隱藏溢位來解決這個問題。

在現有 <style amp-custom> 的結尾新增下列 CSS 規則：

.ampstart-image-fullpage-hero {
  overflow: hidden;
}

現在就試試看吧！

輕微！

不過，我可以透過 CSS 完成這個動作。「amp-animation」的重點是什麼？

那在情況下是真的，但amp-animation具有能執行的不能用 CSS 完成的附加功能。舉例來說，動畫可以根據可見度觸發 (同時也會根據可見度暫停)，也可能透過 AMP 動作觸發。amp-animation 也是由 Web Animals API 所開發，而它的功能比 CSS 動畫更多，尤其是在可撰寫性方面。

摘要

你已瞭解如何使用 amp-fx-collection 建立視差效果。
您已經學習到 amp-animation。

這個部分的完整程式碼請見：http://codepen.io/aghassemi/pen/OpXKzo

您剛建立了精美的互動式 AMP 網頁。

讓我們再次回顧您今天的成就，慶祝自己。

以下為已完成連結的網頁連結：http://s.codepen.io/aghassemi/debug/OpXKzo

... 而最終程式碼：http://codepen.io/aghassemi/pen/OpXKzo

未命名.gif

這個程式碼研究室的 CodePen 項目集如下：https://codepen.io/collection/XzKmNB/

啊，那麼......

我們忘了檢查網頁在各種板型規格上的外觀，例如使用橫向模式的平板電腦。

讓我們看看：

未命名.gif

太棒了！

祝你有個美好的一天

下一步

本程式碼研究室只針對 AMP 提供的內容。有許多資源和程式碼研究室可協助您建立出色的 AMP 網頁：

如有疑問或遇到問題，請前往 AMP Slack 頻道，或透過 GitHub 建立討論、錯誤報告或功能要求。

賞心悅目的標準 AMP 網頁

建構項目

軟硬體需求

提供內容的工具

從 amp.dev 下載範本

執行範本程式碼

移除範本程式碼

新增回應式導覽

新增主頁橫幅和標題

摘要

新增標題和段落

新增圖片

新增自動播放的影片

新增嵌入內容

摘要

新增相片輪轉介面

新增縮圖輪轉介面

在使用者輕觸縮圖時變更圖片

醒目顯示使用者輕觸縮圖的縮圖

摘要

什麼是 amp-bind？

使用 amp-bind 重新導入圖片庫

在圖片庫中新增文字

摘要

在名稱中加入視差效果

在網頁中新增動畫

摘要

啊，那麼......

下一步

什麼是 `amp-bind`？

使用 `amp-bind` 重新導入圖片庫