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，圖片的縮放比例將不會小於視viewport。

lock-bounds (選填)

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

驗證

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