JavaScript para animar elementos HTML en scroll-WOW. js
| Autor: | matthieua |
|---|---|
| Views Total: | 10,578 |
| Sitio oficial: | Ir a la web |
| Actualizado: | May 19, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
WOW. js es una increíble secuencia de comandos de JavaScript que aprovecha las animaciones de CSS3 para animar & revelar elementos HTML cuando se desplazan a la vista.
Uso básico
Cargue el Animate. CSS necesario para las animaciones CSS3.
<link rel="stylesheet" href="css/libs/animate.css">
Cree elementos HTML que desee animar al desplazarse hacia abajo.
<div id="main"> <section class="wow fadeInDown"></section> <section class="wow pulse" data-wow-iteration="infinite" data-wow-duration="1500ms"></section> <section class="wow slideInRight" data-wow-delay="2s"></section> <section class="wow bounceInLeft" data-wow-offset="300"></section> <section class="wow slideInLeft" data-wow-duration="4s"></section> </div>
Cargue el wow. js al final del documento para que la página se cargue más rápido.
<script src="dist/wow.js"></script>
Inicialización con configuración opcional.
wow = new WOW(
{
boxClass:
'wow',
animateClass: 'animated',
offset:
100
}
);
wow.init();
Todas las opciones predeterminadas.
var wow = new WOW({
// selector
boxClass: 'wow',
// animate class
animateClass: 'animated',
// offset in pixels
offset: 0,
// triggers animations on mobile devices
mobile: true,
// acts on asynchronously loaded content
live: true,
// callback function that will be triggered every time an animation is started
callback:
function(box) {
},
// scroll container selector
scrollContainer: null
});
