AMP

amp-story-panning-media

Experimental

Description

Transition an image's position and zoom between pages.

 

Required Scripts

<script async custom-element="amp-story-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>

Supported Layouts

The amp-story-panning-media component provides a way to pan and zoom an image between pages in Web Stories.

Usage

Use the amp-story-panning-media to transition an image between pages. The component can animate between position and zoom.

Environment setup

Add the following script tag to the head of your Web Story:

<script async custom-element="amp-story-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>

Configuration

The amp-story-panning-media component accepts 1 descendant. This descendant must be an amp-img. Components transition between pages when their child has the same src value.

<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 use example

The Northern Sky Constellations Web Story uses a single star chart for the entire story. It highlights different constellations by panning and zooming. A parallax transition effect can be achieved by layering two png star images with transparency.

Web Story creation tool integration example

The Web Story creation tool integration example demos how to modify the component with sliders.

Attributes

data-x (optional)

Specifies the horizontal position in percentage.
Centered on 0 (default) with positive values moving the image to the right (50% centering left edge of image) and negative to the left (-50% centering right edge of image).

data-y (optional)

Specifies the vertical position in percentage. Centered on 0 (default) with positive values moving the image down (50% centering top edge of image) and negative upward (-50% centering bottom edge of image).

data-zoom (optional)

Specifies the level of zoom. The default is 1. This corresponds to the image covering it's container with the same behavior the CSS declaration background: cover;. A higher value scales the image up (zooms in). A lower value scales the image down (zooms out). If lock-bounds is specified the image will not scale smaller than the viewport.

lock-bounds (optional)

Prevents the image from panning beyond the viewport. When using lock-bounds width and height must be specified on the amp-img child.

Validation

See validation rules in amp-story-panning-media validator.

Bạn cần được trợ giúp thêm?

Bạn đã đọc tài liệu này hàng chục lần, nhưng nó không thật sự trả lời mọi thắc mắc của bạn? Có lẽ những người khác cũng cảm thấy như vậy: hãy liên hệ với họ trên Stack Overflow.

Truy cập Stack Overflow
Bạn tìm thấy một lỗi hoặc cần bổ sung một tính năng?

Dự án AMP đặc biệt khuyến khích sự tham gia và đóng góp của bạn! Chúng tôi hi vọng bạn sẽ trở thành một người tham gia tích cực trong cộng đồng mã nguồn mở của chúng tôi, nhưng chúng tôi cũng chào mừng các đóng góp đơn lẻ về vấn đề mà bạn đặc biệt quan tâm.

Truy cập GitHub