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.
|Examples||Annotated code example for amp-fx-flying-carpet|
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.
<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.
|height||The height of the flying carpet's "window".|
|common attributes||This element includes common attributes extended to AMP components.|
- You may use the
amp-fx-flying-carpetelement selector to style it freely.
amp-fx-flying-carpetelements are always
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 OverflowFound 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