重要事項：本文件不適用於您目前選取的格式 email！
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>
支援的版面配置
`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 使用範例
「Northern Sky Constellations 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 validator` 中的驗證規則。
您已經讀過這份文件十幾次，但它仍然沒有涵蓋您所有的問題嗎？也許其他人也有相同的感受：在 Stack Overflow 上與他們聯繫。
前往 Stack Overflow 發現錯誤或缺少功能嗎？AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別熱衷的問題提供一次性的貢獻。
前往 GitHub