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 验证器中的验证规则。