Reveladas ao rolar a página.
Para que as animações sejam ativadas ao rolar a página, é necessário utilizar um script externo, conhecido como wow.js.
O propósito do wow.js é detectar a altura da página e aplicar alterações nas animações, que são definidas através de atributos inseridos no HTML.
Para começar, você pode acessar o link fornecido e baixar o arquivo wow.js ou melhor, sua versão minificada wow.min.js. Também é possível utilizar o script diretamente de um CDN: https://cdnjs.com/libraries/wow.
Modo de usar
Primeiro incluimos o arquivo javascript em seguida chamamos a classe WOW
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/"></script>
<script>
new WOW({
animateClass: "animation",
offset: 100,
}).init();
</script>
Para mais informações acessem a página de documentação do wow.js
Atributos de opções do wow.js
data-wow-duration: |
Altera a duração da animação |
|---|---|
data-wow-delay: |
Atraso antes a animação começar |
data-wow-offset: |
Distância para iniciar a animação (relacionado com a parte inferior do navegador) |
data-wow-iteration: |
Número de vezes que a animação é repetida |
Alguns exemplos práticos:
<div class="wow fadeleft" data-wow-duration="2s" data-wow-delay="1s">...<div> <div class="wow bouncein" data-wow-duration="2s" data-wow-delay="1s" data-wow-offset="4">...<div> <div class="wow pulse" data-wow-duration="2s" data-wow-delay="1s" data-wow-iteration="3">...<div>
São 29 classes CSS para animações, algumas delas baseadas no Animate.css
.animation {
animation-duration: 1s;
animation-fill-mode: both;
}
/* -------------------------------------
fade
*/
.fade { animation-name: fade }
@keyframes fade {
0% { opacity: 0 }
100% { opacity: 1 }
}
.fadescale { animation-name: fadescale }
@keyframes fadescale {
0% {
opacity: 0;
transform: scale(0)
}
50% { opacity: .5 }
100% {
opacity: 1;
transform: scale(1)
}
}
.fadetop { animation-name: fadetop }
@keyframes fadetop {
0% {
opacity: 0;
transform: translateY(-20px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.faderight { animation-name: faderight }
@keyframes faderight {
0% {
opacity: 0;
transform: translateX(20px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
.fadebottom { animation-name: fadebottom }
@keyframes fadebottom {
0% {
opacity: 0;
transform: translateY(20px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.fadeleft { animation-name: fadeleft }
@keyframes fadeleft {
0% {
opacity: 0;
transform: translateX(-20px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
/* -------------------------------------
fadefast
*/
.fadefasttop { animation-name: fadefasttop }
@keyframes fadefasttop {
0% {
opacity: 0;
transform: translateY(-180px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.fadefastright { animation-name: fadefastright }
@keyframes fadefastright {
0% {
opacity: 0;
transform: translateX(180px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
.fadefastbottom { animation-name: fadefastbottom }
@keyframes fadefastbottom {
0% {
opacity: 0;
transform: translateY(180px)
}
100% {
opacity: 1;
transform: translateY(0)
}
}
.fadefastleft { animation-name: fadefastleft }
@keyframes fadefastleft {
0% {
opacity: 0;
transform: translateX(-180px)
}
100% {
opacity: 1;
transform: translateX(0)
}
}
/* -------------------------------------
slide
*/
.slidetop { animation-name: slidetop }
@keyframes slidetop {
0% {
opacity: 0;
transform: translateY(-500px)
}
100% { transform: translateY(0) }
}
.slideright { animation-name: slideright }
@keyframes slideright {
0% {
opacity: 0;
transform: translateX(500px)
}
100% { transform: translateX(0) }
}
.slidebottom { animation-name: slidebottom }
@keyframes slidebottom {
0% {
opacity: 0;
transform: translateY(500px)
}
100% { transform: translateY(0) }
}
.slideleft { animation-name: slideleft }
@keyframes slideleft {
0% {
opacity: 0;
transform: translateX(-500px)
}
100% { transform: translateX(0) }
}
/* -------------------------------------
bounce
*/
.bounce { animation-name: bounce }
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0) }
40% { transform: translateY(-30px) }
60% { transform: translateY(-15px) }
}
.bouncein { animation-name: bouncein }
@keyframes bouncein {
0% {
opacity: 0;
transform: scale(.3)
}
50% {
opacity: 1;
transform: scale(1.05)
}
70% { transform: scale(.9) }
100% { transform: scale(1) }
}
.bounceintop { animation-name: bounceintop }
@keyframes bounceintop {
0%, 60%, 75%, 90%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1) }
0% {
opacity: 0;
transform: translate3d(0, -3000px, 0)
scaleY(3)
}
60% {
opacity: 1;
transform: translate3d(0, 25px, 0)
scaleY(0.9)
}
75% { transform: translate3d(0, -10px, 0) scaleY(0.95) }
90% { transform: translate3d(0, 5px, 0) scaleY(0.985) }
100% { transform: translate3d(0, 0, 0) }
}
.bounceinright { animation-name: bounceinright }
@keyframes bounceinright {
0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
0% {
opacity: 0;
transform: translate3d(3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(-25px, 0, 0)
}
75% { transform: translate3d(10px, 0, 0) }
90% { transform: translate3d(-5px, 0, 0) }
100% { transform: none }
}
.bounceinbottom { animation-name: bounceinbottom }
@keyframes bounceinbottom {
0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
0% {
opacity: 0;
transform: translate3d(0, 3000px, 0)
}
60% {
opacity: 1;
transform: translate3d(0, -20px, 0)
}
75% { transform: translate3d(0, 10px, 0) }
90% { transform: translate3d(0, -5px, 0) }
100% { transform: translate3d(0, 0, 0) }
}
.bounceinleft { animation-name: bounceinleft }
@keyframes bounceinleft {
0%, 60%, 75%, 90%, 100% { transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000) }
0% {
opacity: 0;
transform: translate3d(-3000px, 0, 0)
}
60% {
opacity: 1;
transform: translate3d(25px, 0, 0)
}
75% { transform: translate3d(-10px, 0, 0) }
90% { transform: translate3d(5px, 0, 0) }
100% { transform: none }
}
/* -------------------------------------
rotate
*/
.rotate { animation-name: rotate }
@keyframes rotate {
0% {
transform-origin: center center;
transform: rotate(-200deg);
opacity: 0
}
100% {
transform-origin: center center;
transform: rotate(0);
opacity: 1
}
}
.rotateright { animation-name: rotateright }
@keyframes rotateright {
0% {
transform-origin: right bottom;
transform: rotate(90deg);
opacity: 0
}
100% {
transform-origin: right bottom;
transform: rotate(0);
opacity: 1
}
}
.rotateleft { animation-name: rotateleft }
@keyframes rotateleft {
0% {
transform-origin: left bottom;
transform: rotate(-90deg);
opacity: 0
}
100% {
transform-origin: left bottom;
transform: rotate(0);
opacity: 1
}
}
.toroll { animation-name: toroll }
@keyframes toroll {
0% {
opacity: 0;
transform: translateX(-100%) rotate(-120deg)
}
100% {
opacity: 1;
transform: translateX(0px) rotate(0deg)
}
}
/* -------------------------------------
variados
*/
.shake { animation-name: shake }
@keyframes shake {
0%, 100% { transform: translateX(0) }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px) }
20%, 40%, 60%, 80% { transform: translateX(10px) }
}
.flash { animation-name: flash }
@keyframes flash {
0%, 50%, 100% { opacity: 1 }
25%, 75% { opacity: 0 }
}
.pulse { animation-name: pulse }
@keyframes pulse {
0% { transform: scale(1) }
50% { transform: scale(1.1) }
100% { transform: scale(1) }
}
.zoom { animation-name: zoom }
@keyframes zoom {
0% {
opacity: 0;
transform: scale3d(.3, .3, .3)
}
50% { opacity: 1 }
}
.speedright {
animation-name: speedright;
animation-timing-function: ease-out
}
@keyframes speedright {
0% {
transform: translateX(100%) skewX(-30deg);
opacity: 0
}
60% {
transform: translateX(-20%) skewX(30deg);
opacity: 1
}
80% {
transform: translateX(0%) skewX(-15deg);
opacity: 1
}
100% {
transform: translateX(0%) skewX(0deg);
opacity: 1
}
}