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

<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 快拍 为整个快拍使用单张星图。它通过平移和缩放来突出显示不同的星座。可以通过叠加两张具有透明度的 png 星图来实现视差过渡效果。

Web Story 创建工具集成示例

Web 快拍创建工具集成示例 演示如何使用滑块修改组件。

属性

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