¿Cómo insertar animaciones Scrollbound en AMP HTML?

Fácil y seguro podrá agregar animaciones Scrollbound en el formato AMP HTML, a continuación las siguientes instrucciones

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í.

<style amp-custom>


  /* * Fidget Spinner styles */
  .fidget-spinner-scene {
    margin: 10px 20%;
  }

</style>

Vamos a crear una rueda giratoria que gira a medida que el usuario se desplaza por la página.

Esta muestra el concepto central detrás de la combinación de amp-position-observer y amp-animation: la capacidad de avanzar a través de una línea de tiempo de animación de cuadro clave a medida que un elemento avanza a través de la ventana gráfica mediante el desplazamiento.

Nuestra escena fidget spinner es un div con una imagen. Agregamos un elemento amp-position-observer como elemento secundario de la escena para monitorear su progreso a través de la ventana gráfica. Echemos un vistazo a los detalles:

on:scroll: este evento es activado por el observador de posición ya que la posición de la escena cambia cuando el usuario se desplaza. El evento proporciona un valor porcentual (decimal entre 0 y 1) que representa qué tan lejos está la escena entre el inicio y el final de su progreso a través de la ventana gráfica.

spinAnimation.seekTo(percent=event.percent): Definiremos amp-animation que hará el spinning en el siguiente paso, aquí estamos acoplando amp-position-observer y amp-animation activando una acción seekTo en la animación como eventos de desplazamiento. Así es como especificamos que nos gusta avanzar a través de la línea de tiempo de la animación a medida que la escena avanza a través de la ventana gráfica mediante el desplazamiento.

intersection-ratios: Define qué parte de la escena debe ser visible en la ventana gráfica antes de que amp-position-observer active cualquiera de sus eventos. Aquí, nos gusta que el spinning suceda solo cuando fidget spinner esté completamente visible, así que lo configuramos en 1.

Ejemplo





  
  

  



  



<div class="fidget-spinner-scene">

  <amp-position-observer on="scroll:spinAnimation.seekTo(percent=event.percent)"
    intersection-ratios="1"
    layout="nodisplay">
  </amp-position-observer>

  <amp-img id="fidgetSpinnerImage"
    width="1024"
    height="1114"
    layout="responsive"
    src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUHDeDpF0cl6rs-x3dc6LmOfAdmt66P8ifpXREvzMiPadfgjRasDq5QQBowvUK7MW4N9RgPq_YWtbVbNwTqJvRT-kYHfHi4YTnr-m0eWrYrpM5FwYO1l5d6uArkPT3bTEOpuL9mjef8wMl/s320/fidget-amp.png"
    alt="Picture of a fidget spinner"></amp-img>
</div>

Ahora tenemos que definir la animación en sí misma:

Bastante sencillo en este caso, queremos que fidgetSpinnerImage gire 360 ​​grados, por lo que solo definimos una "transform": "rotate(360deg)" como el último (y único) fotograma clave. Echemos un vistazo a los detalles:

id="spinAnimation": Necesitamos darle a la animación un Id para que podamos referenciarlo desde el observador de la posición.

"duration": "1": el valor de la duración es irrelevante en este caso, ya que avanzamos a través de la línea de tiempo mediante el desplazamiento, así que simplemente lo configuramos en 1

"direction": "reverse": esto es necesario debido a un error de iOS con Web Animations.

"animations": aquí podemos definir una o más animaciones basadas en fotogramas clave. En nuestro caso, solo necesitamos uno.

"selector": "#fidgetSpinnerImage" es el selector que se dirige al agitador fidget para la animación.

"keyframes": definimos una "transform": "rotate(360deg)" como el último (y único) fotograma clave. Tenga en cuenta que la amp-animation llena automáticamente el primer fotograma clave si no se proporciona.

<amp-animation id="spinAnimation"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1",
      "fill": "both",
      "direction": "reverse",
      "animations": [{
        "selector": "#fidgetSpinnerImage",
        "keyframes": [{
          "transform": "rotate(360deg)"
        }]
      }]
    }
  </script>
</amp-animation>

Tags: Efectos visuales

Share: