¿Cómo agregar una transición al componente amp-carrusel?

Aprenda a insertar una transición al componente amp-carrusel. También podemos usar estos efectos con otros componentes de AMP.

Primero deberá insertar los siguientes scripts

Inserte la extencion amp-position-observer

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

Importe la extencion amp-animation

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

Estilos

El CSS utilizado para este ejemplo se incluye aquí como referencia.

Estas reglas son simplemente necesarias para que las muestras funcionen, pero no son fundamentales para los conceptos que se tratan aquí.

.carousel-container {
    margin-right: -60%;
    margin-left: 60%;
}

En esta muestra, tenemos un carrusel donde el primer elemento se empuja hacia la derecha y cuando el carrusel se vuelve visible, vuelve a su lugar y proporciona una "hint" visual de que el carrusel se puede desplazar horizontalmente

Ejemplo





  
  

  
  
  
  



  




<amp-carousel class="carousel-container"
  height="300"
  layout="fixed-height"
  type="carousel">

  <amp-position-observer on="enter:carouselTrasnsition.start"
    intersection-ratios="0.8"
    layout="nodisplay">
  </amp-position-observer>

<amp-img src="https://unsplash.it/800/600?image=1003"
    width="400"
    height="300"
    alt="a sample image"></amp-img>
  

<amp-img src="https://unsplash.it/800/600?image=1043"
    width="400"
    height="300"
    alt="another sample image"></amp-img>
 

<amp-img src="https://unsplash.it/800/600?image=1032"
    width="400"

    height="300"
    alt="and another sample image"></amp-img>

</amp-carousel>

Aquí definimos nuestra animación de tiempo determinado con un retraso de 200 ms que deslizará el carrusel hacia la izquierda en 500 ms.

Esta animación solo será activada una vez por el observador de posición como se define arriba.

<amp-animation id="carouselTrasnsition"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "500ms",
      "fill": "both",
      "easing": "ease-in",
      "delay": "200ms",
      "animations": [{
        "selector": ".carousel-container",
        "keyframes": [{
          "transform": "translateX(-60%)"
        }]
      }]
    }
  </script>
</amp-animation>

Tags: Efectos visuales

Share: