Animação instantânea do Google AMP
As páginas HTML AMP que adicionam efeitos visuais são fáceis de usar o componente amp-fx-collection , que fornece uma variedade de coleções de efeitos, como fly-in, em que uma imagem de fundo pode entrar no quadro de qualquer lado da tela. Este é um recurso muito popular e efeitos comuns que são vistos em páginas da web hoje em dia.
Scripts necessários: importando a coleção amp-fx-collection para o cabeçalho
<script async custom-element="amp-fx-collection" src=
"https://cdn.ampproject.org/v0/amp-fx-collection-0.1.js">
</script>
Atributos:
- data-duration: especifica a duração da animação que se torna estática após o tempo decorrido.
- flexibilização de dados: varia a velocidade da animação ao longo de toda a duração.
- data-margin-start / end: especifica em qual% da margem da janela de visualização a animação deve começar.
- data-repeat: Para repetir a animação mesmo depois de totalmente carregada após rolar.
- fly-in-bottom / top: o elemento voa de cima para baixo.
- Fly-in-left / right: O elemento voa da direita ou da esquerda.
Exemplo:
<!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>
Saída: a imagem mostrada abaixo é estática. Possui animações fly-in em cada um deles.
As postagens do blog Acervo Lima te ajudaram? Nos ajude a manter o blog no ar!
Faça uma doação para manter o blog funcionando.
70% das doações são no valor de R$ 5,00...
Diógenes Lima da Silva