重要事項：本文件不適用於您目前選取的格式網站！

amp-story-panning-media

實驗性功能

說明

在頁面之間轉換圖片的位置和縮放。

必要指令碼

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

支援的版面配置

填滿 (fill)

amp-story-panning-media 元件提供在 Web Stories (網路故事) 的頁面之間平移和縮放圖片的方式。

用法

使用 amp-story-panning-media 在頁面之間轉換圖片。此元件可以在位置和縮放之間產生動畫效果。

環境設定

將以下指令碼標籤新增至您的 Web Story 的 <head>

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

組態

amp-story-panning-media 元件接受 1 個子系。此子系必須是 amp-img。當子系具有相同的 src 值時，元件會在頁面之間轉換。

<amp-story-page>
  <amp-story-grid-layer>
    <amp-story-panning-media layout="fill" data-x="-10%" data-y="-20%" data-zoom=".8">
      <amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
    </amp-story-panning-media>
  </amp-story-grid-layer>
</amp-story-page>

<amp-story-page>
  <amp-story-grid-layer>
    <amp-story-panning-media layout="fill" data-x="20%" data-y="30%" data-zoom="2">
      <amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
    </amp-story-panning-media>
  </amp-story-grid-layer>
</amp-story-page>

Web Story 使用範例

北天星座 Web Story 為整個故事使用單一星圖。它透過平移和縮放來突顯不同的星座。透過疊加兩張具有透明度的 png 星星圖片，可以實現視差轉換效果。

Web Story 建立工具整合範例

Web Story 建立工具整合範例示範如何使用滑桿修改元件。

屬性

data-x (選填)

指定水平位置，以百分比表示。
以 0 (預設值) 為中心，正值會將圖片向右移動 (50% 為圖片左邊緣置中)，負值則向左移動 (-50% 為圖片右邊緣置中)。

data-y (選填)

指定垂直位置，以百分比表示。以 0 (預設值) 為中心，正值會將圖片向下移動 (50% 為圖片上邊緣置中)，負值則向上移動 (-50% 為圖片下邊緣置中)。

data-zoom (選填)

指定縮放層級。預設值為 1。這對應於圖片涵蓋其容器，行為與 CSS 宣告 background: cover; 相同。較高的值會放大圖片 (放大)。較低的值會縮小圖片 (縮小)。如果指定 lock-bounds，則圖片的縮放比例不會小於檢視區。

lock-bounds (選填)

防止圖片平移超出檢視區。使用 lock-bounds 時，必須在 amp-img 子系上指定 width 和 height。

驗證

請參閱 amp-story-panning-media 驗證器中的驗證規則。

需要更多協助嗎？

您已經閱讀本文件數十次，但它仍然沒有真正涵蓋您的所有問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們交流。

前往 Stack Overflow

發現錯誤或缺少功能？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎針對您特別關注的問題提供一次性的貢獻。

前往 GitHub