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 component in the header.
<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>
amp-fx-flying-carpet elements must be positioned after the first viewport so make sure to place enough content before the element to cover the targeted viewport sizes. The box that follows is to ensure that the
amp-fx-flying-carpet is placed after the first viewport.
Flying carpet for ads
amp-fx-flying-carpet can be used to display ads. Use the
height parameter to specify the height of the flying carpets "window".
<div> <div class="amp-flying-carpet-text-border">Advertising</div> <amp-fx-flying-carpet height="300px"> <amp-ad width="300" height="600" layout="fixed" type="doubleclick" data-slot="/35096353/amptesting/formats/flying_carpet"> </amp-ad> </amp-fx-flying-carpet> <div class="amp-flying-carpet-text-border">Advertising</div> </div>
Flying carpet for images
amp-fx-flying-carpet can be also used to display images.
<amp-fx-flying-carpet height="300px"> <amp-img src="/static/samples//img/landscape_lake_1280x857.jpg" width="1280" height="853" alt="an image"></amp-img> </amp-fx-flying-carpet>
amp-fx-flying-carpet elements must be positioned before the last viewport so make sure to place enough content after the element to cover the targeted viewport sizes.
The box that follows is to ensure that the
amp-fx-flying-carpet is placed before the last viewport.
If the explanations on this page don't cover all of your questions feel free to reach out to other AMP users to discuss your exact use case.Go to Stack Overflow An unexplained 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.Edit sample on GitHub
Written by @kul3r4