¿Cómo insertar Amp-fx-parallax?


amp-fx-parallax


La extensión de amp-fx-parallax permite que un elemento se mueva como si estuviera más cerca o más lejos con respecto al primer plano del contenido de la página. A medida que el usuario desplaza la página, el elemento se desplaza más rápido o más lento dependiendo del valor asignado al atributo.

El efecto Parallax se puede habilitar añadiendo el atributo amp-fx-parallax=<factor> a cualquier HTML o AMP.

El factor es un decimal que controla cuánto más rápido o más lento el elemento se desplazaría en relación con la velocidad de desplazamiento:

- Un valor mayor que 1 desplaza el elemento hacia arriba (el elemento se desplaza más rápido) cuando el usuario desplaza hacia abajo la página.
- Un valor inferior a 1 desplaza el elemento hacia abajo (el elemento se desplaza más lentamente) cuando el usuario se desplaza hacia abajo.
- Un valor de 1 se comporta normalmente.
- Un valor de 0 efectivamente hace que el elemento se corrija con la página.

Inserte la extensión amp-fx-parallax justo después de la apertura <head>


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


Slide-out-of-sight efecto con factor > 1

En el ejemplo siguiente, estamos permitiendo que el título de la página se desplace más rápido que la página agregando el atributo amp-fx-parallax y dándole un valor mayor que 1. Esto crea un efecto visual deslizable fuera de la vista. El título se repite únicamente con fines de demostración.


Ejemplo

Title 1

Title 2

Title 3

Title 4

Title 5

<div class="header">   <amp-img layout="responsive"     width="1920"     height="1280"     src="https://unsplash.it/1920/1280?image=1003"></amp-img>   <h1 amp-fx-parallax="1.4">     Title 1     <br> Title 2     <br> Title 3     <br> Title 4     <br> Title 5     <br> Title 6     <br> Title 7     <br> Title 8     <br> Title 9     <br> Title 10     <br> Title 11     <br> Title 12     <br> Title 13     <br> Title 14     <br> Title 15     <br> Title 16     <br> Title 17     <br> Title 18     <br> Title 19     <br> Title 20     <br>   </h1> </div>



Share:

Related post

Comentarios

Disqus

Disqus comments:


Facebook

Facebook comments: