¿Cómo agregar un Parallax en AMP HTML?


Aprenda a insertar una ventana de imagen Parallax en el formato AMP HTML realizando unos simples pasos, y así optimizar el sitio web que está creando en AMP.

Parallax es otro efecto que es posible combinando amp-animation y amp-position-observer.

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


.parallax-image-window {
    overflow: hidden;
}
.parallax-image-window amp-img {
   margin-bottom: -30%;
}


Parallax normalmente implica traducir un elemento en el eje Y a medida que el usuario se desplaza.

Aquí definimos una escena que tiene una altura menor que la imagen dentro de ella, mientras el usuario se desplaza, movemos la imagen creando una ventana de paralaje en la imagen.


Ejemplo

<div class="parallax-image-window">   <amp-position-observer on="scroll:parallaxTransition.seekTo(percent=event.percent)"     intersection-ratios="1"     layout="nodisplay">   </amp-position-observer>   <amp-img id="parallaxImage"     width="1280"     height="873"     layout="responsive"     src="/img/elephant.jpg"     alt="Picture of an elephant"></amp-img> </div>

La animación en sí misma simplemente mueve la imagen a través de "transform": "translateY(-30%)"


<amp-animation id="parallaxTransition"
  layout="nodisplay">
  <script type="application/json">
    {
      "duration": "1",
      "fill": "both",
      "direction": "reverse",
      "animations": [{
        "selector": "#parallaxImage",
        "keyframes": [{
          "transform": "translateY(-30%)"
        }]
      }]
    }
  </script>
</amp-animation>





Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: