En las páginas HTML de AMP, agregar efectos visuales es fácil con el componente amp-fx-collection , que proporciona una variedad de colecciones de efectos, como la aparición gradual, en la que la opacidad de la imagen de fondo sigue aumentando hasta que se vuelve visible.
Secuencias de comandos requeridas: importar la colección amp-fx 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.
- facilitación de datos: varía la velocidad de la animación a lo largo de toda la duración.
- d ata-margin-start/end: especifica en qué % del margen del puerto de visualización 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.
- fade-in-scroll: para cambiar la opacidad de la imagen cuando se desplaza dentro del puerto de visualización.
Ejemplo:
HTML
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>Google AMP fad-in Animation</title>
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!-- Import `amp-fx-collection` extension -->
<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>
<!--fade-in with a duration-->
<amp-img amp-fx="fade-in"
data-duration="2000ms"
width="1280" height="873"
layout="responsive" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20201016212652/outputonlinepngtools.png">
</amp-img>
<!-- animation starts past 50%
of the viewport-->
<amp-img amp-fx="fade-in"
data-margin-start="50%"
width="1280" height="873"
layout="responsive" src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/xrgwkj7i-Edge-Computing.jpg">
</amp-img>
<!-- Scroll dependent fade-in -->
<amp-img amp-fx="fade-in-scroll"
width="1600" height="900"
layout="responsive" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20200825214742/Top7CodeSharingWebsiteForDevelopers.png">
</amp-img>
<!-- Custom start/end points -->
<amp-img amp-fx="fade-in-scroll"
data-margin-start="20%"
data-margin-end="80%"
width="1600" height="900"
layout="responsive" src=
"https://contribute.geeksforgeeks.org/wp-content/uploads/WorkingWithTextData-min.png">
</amp-img>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por somsagar2019 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA