Transiciones de desvanecimiento y deslizamiento en AMP HTML

Aprenda a insertar una imagen con un título o descripción deslizante, el mismo puede desplazarse desde la izquierda hacia la derecha y viceversa, todo ello utilizando las técnicas de AMP HTML.

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>

Ahora agregue el script amp-fit-text

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-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>

.card {
    margin: 10%;
    position: relative;
  }
  .card-title {
    padding: 5%;
    padding-right: 40%;
    font-size: 50%;
    font-weight: bold;
    color: #FAFAFA;
    transform: translateX(-100%);
  }

</style>

Ahora que hemos aprendido los conceptos centrales básicos detrás de amp-position-observer y amp-animation, profundicemos en formas más creativas de combinarlos para crear transiciones interesantes.

En esta muestra, combinaremos las transiciones timebound y scrollbound juntas para crear un efecto donde la opacidad de la tarjeta esté vinculada a la cantidad de ella visible en la ventana gráfica (scrollbound) y el título de la tarjeta animada in/out (timebound) a medida que la tarjeta ingresa y sale de la ventana gráfica.

Nuestra escena de cartas está compuesta simplemente por una imagen y un título superpuesto. Aquí definimos dos observadores de posición con diferentes valores de relación de intersección:

- El primero controlará la opacidad de la imagen a medida que el usuario se desplaza.

- El segundo ejecutará una animación de diapositivas de tiempo para el título cuando la escena se vuelva más visible (80%) y la vuelva a ejecutar "en reversa" cuando la escena salga un poco de la ventana gráfica (20%).

Ejemplo





  
  

  
  

  
    

      AMP (Accelerated Mobile Pages) es una iniciativa de código abierto promovida por Google!
    
  

  



  



  




<div class="card ampstart-card">

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

  <amp-position-observer on="enter:slideTransition.start; exit:slideTransition.start,slideTransition.reverse"
    intersection-ratios="0.8"
    layout="nodisplay">
  </amp-position-observer>

  <amp-fit-text layout="fill">
    <div class="card-title">
     Organic, fresh tomatos and pasta!
    </div>
  </amp-fit-text>

  <amp-img id="cardImage"
    width="1280"
    height="898"
    layout="responsive"
    src="/img/food.jpg"
    alt="Picture of food table."></amp-img>
</div>

Definamos los fotogramas clave para la transición de entrada/salida de desvanecimiento en espiral.

Nos dirigimos a #cardImage y definimos keyframes de forma tal que la imagen gana opacidad completa dentro del primer 40% de la línea de tiempo y comienza a desvanecerse en el último 40% de la línea de tiempo.

Tenga en cuenta que dado que el observador de posición que controla esta animación tiene una relación de intersección establecida en 0, pasamos por la línea de tiempo completa cuando el usuario despliega la cantidad de píxeles de ViewportHeight + 2 * SceneHeight.

<amp-animation id="fadeTransition"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1",
      "fill": "both",
      "direction": "reverse",
      "animations": [{
        "selector": "#cardImage",
        "keyframes": [{
            "opacity": "0.3",
            "offset": 0
          },
          {
            "opacity": "1",
            "offset": 0.4
          },
          {
            "opacity": "1",
            "offset": 0.6
          },
          {
            "opacity": "0.3",
            "offset": 1
          }
        ]
      }]
    }
  </script>
</amp-animation>

Para el efecto de deslizamiento hacia adentro/hacia afuera del título, solo definimos una animación de 500ms que moverá el título a lo largo del eje X.

Esta animación simplemente se activará (en direcciones normales o inversas) a través del observador de la segunda posición cuando la escena sea mayormente visible/invisible.

<amp-animation id="slideTransition"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "500ms",
      "fill": "both",
      "easing": "ease-out",
      "iterations": "1",
      "animations": [{
        "selector": ".card-title",
        "keyframes": [{
            "transform": "translateX(-100%)"
          },
          {
            "transform": "translateX(0)"
          }
        ]
      }]
    }
  </script>
</amp-animation>

Tags: Efectos visuales

Share: