Important: this documentation is not applicable to your currently selected format stories!

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로 이동하기