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.

Требуется дополнительная помощь?

Вы читали этот документ десятки раз, но так и не нашли ответов на все свои вопросы? Возможно, другие люди столкнулись с такой же проблемой — обратитесь к ним на Stack Overflow.

Перейти на Stack Overflow
Нашли ошибку или недостающую функцию?

Проект AMP активно поощряет ваше участие и сотрудничество! Мы надеемся, что вы станете постоянным участником нашего открытого сообщества, но разовые вклады в работу над задачами, которые вам особенно интересны, также приветствуются.

Перейти на GitHub