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

amp-fx-flying-carpet

Description

Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport.

Required Scripts

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

Usage

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.

Check if your ad network permits use of flying carpets when implementing the amp-fx-flying-carpet to display ads.

<amp-fx-flying-carpet height="300px">
  <amp-img
    src="fullscreen.png"
    width="300"
    height="500"
    layout="responsive"
  ></amp-img>
</amp-fx-flying-carpet>

The following requirements are imposed on amp-fx-flying-carpet positioning:

  • It should be positioned so that it doesn't obscure the first viewport (outside of top 75%).
  • It should be positioned so that its top can reach or be above the top of the last viewport when scrolled.

Attributes

height

The height of the flying carpet's "window".

Common attributes

amp-fx-flying-carpet includes the common attributes extended to AMP components.

Styling

You may use the amp-fx-flying-carpet element selector to style it freely. amp-fx-flying-carpet elements are always position: relative.

Validation

See amp-fx-flying-carpet rules in the AMP validator specification.

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