Indice

Important: this documentation is not applicable to your currently selected format email!

amp-fx-flying-carpet

Description

Wraps its children in a unique full-screen scrolling container allowing you to display a full-screen ad without taking up the entire viewport.

Required Scripts

<script async custom-element="amp-fx-flying-carpet" src="https://cdn.ampproject.org/v0/amp-fx-flying-carpet-0.1.js"></script>

Usage

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.

Check if your ad network permits use of flying carpets when implementing the amp-fx-flying-carpet to display ads.

<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

amp-fx-flying-carpet includes the 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.

Ti servono altre informazioni?

Hai letto questo documento decine di volte ma non risponde a tutte le tue domande? Forse ci sono altre persone col tuo stesso problema: entra in contatto con loro su Stack Overflow.

Vai a Stack Overflow

Hai trovato un bug o una funzione mancante?

Il progetto AMP invita tutti a partecipare e dare il proprio contributo! Ci auguriamo che tu possa partecipare regolarmente alla nostra community open source, ma saremo anche lieti di ricevere eventuali contributi una-tantum sulle questioni che ti interessano.

Vai a GitHub