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 |
Check if your ad network permits use of flying carpets when implementing the amp-fx-flying-carpet
to display adds.
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 alwaysposition: relative
.
Validation
See amp-fx-flying-carpet rules in the AMP validator specification.
You've read this document a dozen times but it doesn't really cover all of your questions? Maybe other people felt the same: reach out to them on Stack Overflow.
Go to Stack Overflow Found a bug or missing a feature?The AMP project strongly encourages your participation and contributions! We hope you'll become an ongoing participant in our open source community but we also welcome one-off contributions for the issues you're particularly passionate about.
Go to GitHub