¿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>
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.
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<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>Title 1
Title 2
Title 3
Title 4
Title 5
Comentarios
Disqus comments:
Facebook comments: