amp-fx-flying-carpet

El amplificador Amp-fx-flying-carpet muestra el contenido dentro de un contenedor de altura fija. A medida que el usuario desplaza la página, la alfombra voladora revela más contenido, deslizándose sobre su contenido como si estuviera mirando a través de una ventana en la página.

Para obtener la mejor experiencia de este ejemplo, utilice un dispositivo móvil o elija un diseño de dispositivos móviles mediante la consola de Chrome.

Preparar

Inserte el script amp-fx-flying-carpet justo abajo de la apertura <head>


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

Uso básico

El elemento amp-fx-flying-carpet debe colocarse después de la primera ventana gráfica, así que asegúrese de colocar suficiente contenido antes de que el elemento cubra los tamaños de la ventana de destino.

El texto siguiente es para asegurar que el elemento amp-fx-flying-carpet se coloque después de la primera ventana gráfica.


Ejemplo



  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
  ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
  ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.


<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
  ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
  ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
</p>

En el elemento amp-fx-flying-carpet se puede utilizar para mostrar anuncios.

Utilice parámetro de height para especificar la altura de las alfombras volantes "ventana".


Ejemplo


Advertising
    
      
      
    
    Advertising

    <div class="amp-flying-carpet-text-border">Advertising</div>
    <amp-fx-flying-carpet height="300px">
      <amp-ad width="300"
        height="600"
        class="align-right"
        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>

En el amplificador amp-fx-flying-carpet se puede usar para mostrar imágenes.


Ejemplo



  


<amp-fx-flying-carpet height="200px">
  <amp-img src="/img/landscape_lake_1280x857.jpg"
    width="1280"
    height="853"
    alt="an image"></amp-img>
</amp-fx-flying-carpet>

Posicionamiento

En el amplificador amp-fx-flying-carpet debe colocarse antes de la última ventana de visualización así que asegúrese de colocar suficiente contenido después del elemento para cubrir los tamaños de la ventana de destino.

El texto que sigue es para asegurar que el amp-fx-flying-carpet se coloca antes de la última ventana.


Ejemplo



  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
  ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
  ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.


<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis venenatis, metus a tristique aliquet, enim nibh efficitur sem, ut iaculis urna justo eu diam. Nullam cursus sapien et sodales posuere. Vestibulum ante ipsum primis in faucibus orci luctus et
  ultrices posuere cubilia Curae; Suspendisse potenti. Donec vitae ornare risus. Maecenas eleifend ante vel dui laoreet, et porttitor libero rutrum. Nam arcu mi, ullamcorper at risus et, pulvinar ultrices erat. In pellentesque sem vel purus auctor,
  ut venenatis tellus tristique. Phasellus molestie diam orci, nec gravida turpis bibendum ut. Sed sagittis aliquet lorem sed dictum.
</p>

Tags: Amp HTML en espanol

EFECTOS VISUALES

amp-fx-flying-carpet