Las páginas HTML de AMP que agregan efectos visuales son fáciles de usar con el componente amp-fx-collection , que proporciona una gama de colecciones de efectos, como el vuelo en el que una imagen de fondo puede entrar en el marco desde cualquier lado de la pantalla. Este es un muy popular y efectos comunes que se ven en las páginas web hoy en día.
Scripts requeridos: Importación de amp-fx-collection en el encabezado
HTML
<script async custom-element="amp-fx-collection" src= "https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js"> </script>
Atributos:
- data-duration: Especifica la duración de la animación, se vuelve estática después del tiempo transcurrido.
- data-easing: varía la velocidad de la animación a lo largo de toda la duración.
- data-margin-start/end: especifica en qué % del margen de la ventana gráfica debe comenzar la animación.
- repetición de datos: para repetir la animación incluso después de que se cargue por completo después del desplazamiento.
- fly-in-bottom/top: El elemento vuela desde la parte superior o inferior.
- fly-in-left/right: El elemento vuela desde la derecha o la izquierda.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP amp-fx-collection</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import `amp-fx-collection` extension in header -->
<script async custom-element="amp-fx-collection"
src="https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-fx-collection/index.html">
<meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-moz-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
-ms-animation: -amp-start 8s
steps(1, end) 0s 1 normal both;
animation: -amp-start 8s
steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-moz-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-ms-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@-o-keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
@keyframes -amp-start {
from {
visibility: hidden
}
to {
visibility: visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none
}
</style>
</noscript>
<style amp-custom>
.header {
position: relative;
overflow: hidden;
}
.header h1 {
color: white;
bottom: 10%;
left: 10px;
position: absolute;
z-index: 1;
font-size: 1.7em;
}
.title {
background-color: black;
color: white;
}
.parallax-image-window {
overflow: hidden;
}
.parallax-image-window amp-img {
margin-bottom: -20%;
}
</style>
</head>
<body>
<!--Scroll triggered fly-in animation
with default attributes -->
<amp-img amp-fx="fly-in-left"
width="1600" height="900"
layout="responsive" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201016212652/outputonlinepngtools.png">
</amp-img>
<!-- Scroll triggered fly-in-bottom animation
with default attributes. -->
<amp-img amp-fx="fly-in-bottom"
width="1600" height="900"
layout="responsive" src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/xrgwkj7i-Edge-Computing.jpg">
</amp-img>
<!--Fly in animation that lasts longer by
specifying `data-duration="2000ms"-->
<amp-img amp-fx="fly-in-left"
data-duration="2000ms"
width="1280" height="873"
layout="responsive" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200825214742/Top7CodeSharingWebsiteForDevelopers.png">
</amp-img>
<!-- Animation that takes place over
a larger distance by specifying
`data-fly-in-distance="50%"`.-->
<amp-img amp-fx="fly-in-right"
data-fly-in-distance="50%"
width="1280" height="873"
layout="responsive" src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/WorkingWithTextData-min.png">
</amp-img>
</body>
</html>
Salida: La imagen que se muestra a continuación es estática. Tiene animaciones de vuelo en cada uno de ellos.
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA