Skip to content
Permalink
Branch: master
Find file Copy path
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
81 lines (62 sloc) 3.06 KB
$category@ formats teaser
layout
websites
text
Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport.

amp-fx-flying-carpet

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.

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 Annotated code example for amp-fx-flying-carpet

[tip type="note"] Check if your ad network permits use of flying carpets when implementing the amp-fx-flying-carpet to display adds. [/tip] [TOC]

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="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 This element includes 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.

You can’t perform that action at this time.