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 的头部

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