Do you build things with AMP? Fill out the AMP Developer Survey!
AMP
  • websites

amp-fx-flying-carpet

Introduction

amp-fx-flying-carpet displays its children inside a container of fixed height. As the user scrolls the page, the flying carpet reveals more of it contents, sliding across its children as if peering through a window in the page.

Setup

Import the amp-fx-flying-carpet component in the header.

<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

amp-fx-flying-carpet elements must be positioned after the first viewport so make sure to place enough content before the element to cover the targeted viewport sizes. The box that follows is to ensure that the amp-fx-flying-carpet is placed after the first viewport.

Flying carpet for ads

amp-fx-flying-carpet can be used to display ads. Use the height parameter to specify the height of the flying carpets "window".

Advertising
Advertising
<div class="amp-flying-carpet-text-border">Advertising</div>
<amp-fx-flying-carpet height="300px">
  <amp-ad width="300"
    height="600"
    layout="fixed"
    type="doubleclick"
    data-slot="/35096353/amptesting/formats/flying_carpet">
  </amp-ad>
</amp-fx-flying-carpet>
<div class="amp-flying-carpet-text-border">Advertising</div>

Flying carpet for images

amp-fx-flying-carpet can be also used to display images.

an image
<amp-fx-flying-carpet height="300px">
  <amp-img src="/static/samples//img/landscape_lake_1280x857.jpg"
    width="1280"
    height="853"
    alt="an image">
  </amp-img>
</amp-fx-flying-carpet>

Positioning

amp-fx-flying-carpet elements must be positioned before the last viewport so make sure to place enough content after the element to cover the targeted viewport sizes.

The box that follows is to ensure that the amp-fx-flying-carpet is placed before the last viewport.

Bạn cần được giải thích thêm?

Nếu bạn vẫn còn thắc mắc sau khi đọc hướng dẫn trên trang này, hãy liên hệ với những người dùng AMP khác để thảo luận về trường hợp sử dụng cụ thể của bạn.

Truy cập Stack Overflow
Một tính năng chưa được giải thích?

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.

Chỉnh sửa mẫu trên GitHub