Skip to content

Latest commit

 

History

History
71 lines (54 loc) · 2.51 KB

amp-fx-flying-carpet.md

File metadata and controls

71 lines (54 loc) · 2.51 KB

amp-fx-flying-carpet

Description A flying carpet wraps its children in a unique full-screen scrolling container. In particular, this allows you to display a full-screen ad without taking up the entire viewport, making for a better user experience.
Availability Experimental
Required Script <script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
Examples amp-fx-flying-carpet.html

Behavior

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.

Example:

<amp-fx-flying-carpet height="300px">
  <amp-img src="fullscreen.png" width="100vw" height="100vh"></amp-img>
</amp-fx-flying-carpet>

Attributes

height

The height of the flying carpets "window".

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 errors

The following lists validation errors specific to the amp-fx-flying-carpet tag (see also amp-fx-flying-carpet in the AMP validator specification):

Validation Error Description