Para la última versión estable (v2), vaya aquí
Para comprender mejor cómo funciona esto realmente, te animo a que consultes mi publicación sobre trucos de CSS.
Agregar estilos en <head> :
< link rel =" stylesheet " href =" https://unpkg.com/aos@next/dist/aos.css " /> Agregue el script justo antes de cerrar la etiqueta </body> e inicialice AOS:
< script src =" https://unpkg.com/aos@next/dist/aos.js " > </ script >
< script >
AOS . init ( ) ;
</ script > Instalar el paquete aos :
yarn add aos@nextnpm install --save aos@nextImportar script, estilos e inicializar AOS:
import AOS from 'aos' ;
import 'aos/dist/aos.css' ; // You can also use <link> for styles
// ..
AOS . init ( ) ;Para que funcione, deberá asegurarse de que su proceso de compilación haya configurado el cargador de estilos y lo incluya todo correctamente. Sin embargo, si está utilizando Parcel, funcionará de inmediato como se proporciona.
AOS . init ( ) ;
// You can also pass an optional settings object
// below listed default settings
AOS . init ( {
// Global settings:
disable : false , // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
startEvent : 'DOMContentLoaded' , // name of the event dispatched on the document, that AOS should initialize on
initClassName : 'aos-init' , // class applied after initialization
animatedClassName : 'aos-animate' , // class applied on animation
useClassNames : false , // if true, will add content of `data-aos` as classes on scroll
disableMutationObserver : false , // disables automatic mutations' detections (advanced)
debounceDelay : 50 , // the delay on debounce used while resizing window (advanced)
throttleDelay : 99 , // the delay on throttle used while scrolling the page (advanced)
// Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
offset : 120 , // offset (in px) from the original trigger point
delay : 0 , // values from 0 to 3000, with step 50ms
duration : 400 , // values from 0 to 3000, with step 50ms
easing : 'ease' , // default easing for AOS animations
once : false , // whether animation should happen only once - while scrolling down
mirror : false , // whether elements should animate out while scrolling past them
anchorPlacement : 'top-bottom' , // defines which position of the element regarding to window should trigger the animation
} ) ;data-aos : < div data-aos =" fade-in " > </ div > Y ajuste el comportamiento utilizando atributos data-aos-* :
< div
data-aos =" fade-up "
data-aos-offset =" 200 "
data-aos-delay =" 50 "
data-aos-duration =" 1000 "
data-aos-easing =" ease-in-out "
data-aos-mirror =" true "
data-aos-once =" false "
data-aos-anchor-placement =" top-center "
>
</ div >Ver la lista completa de todas las animaciones, flexibilizaciones y ubicaciones de anclajes.
También hay una configuración que se puede utilizar solo por elemento:
data-aos-anchor : elemento cuyo desplazamiento se utilizará para activar la animación en lugar de una real.Ejemplos:
< div data-aos =" fade-up " data-aos-anchor =" .other-element " > </ div >De esta manera puedes activar la animación en un elemento, mientras te desplazas a otro, lo que resulta útil para animar elementos fijos.
El objeto AOS se expone como una variable global, por ahora hay tres métodos disponibles:
init - inicializa AOSrefresh : recalcula todos los desplazamientos y posiciones de los elementos (llamado al cambiar el tamaño de la ventana)refreshHard : reinicia la matriz con elementos AOS y activa refresh (llamada en cambios DOM que están relacionados con elementos aos )Ejecución de ejemplo:
AOS . refresh ( ) ; De forma predeterminada, AOS está atento a los cambios de DOM y, si hay elementos nuevos cargados de forma asincrónica o cuando se elimina algo del DOM, llama refreshHard automáticamente. En navegadores que no son compatibles con MutationObserver como IE, es posible que deba llamar AOS.refreshHard() usted mismo.
El método refresh se llama al cambiar el tamaño de la ventana, etc., ya que no requiere crear una nueva tienda con elementos AOS y debe ser lo más liviano posible.
AOS envía dos eventos en el documento: aos:in y aos:out cada vez que cualquier elemento se anima dentro o fuera, para que puedas hacer cosas adicionales en JS:
document . addEventListener ( 'aos:in' , ( { detail } ) => {
console . log ( 'animated in' , detail ) ;
} ) ;
document . addEventListener ( 'aos:out' , ( { detail } ) => {
console . log ( 'animated out' , detail ) ;
} ) ; También puede decirle a AOS que active un evento personalizado en un elemento específico, configurando el atributo data-aos-id :
< div data-aos =" fade-in " data-aos-id =" super-duper " > </ div >Luego podrás escuchar dos eventos personalizados:
aos:in:super-duperaos:out:super-duperA veces, las animaciones integradas simplemente no son suficientes. Digamos que necesita un cuadro para tener una animación diferente según la resolución. Así es como puedes hacerlo:
[ data-aos = "new-animation" ] {
opacity : 0 ;
transition-property : transform , opacity;
& . aos-animate {
opacity : 1 ;
}
@media screen and ( min-width : 768 px ) {
transform : translateX ( 100 px );
& . aos-animate {
transform : translateX ( 0 );
}
}
}Luego úselo en HTML:
< div data-aos =" new-animation " > </ div >El elemento solo animará la opacidad en dispositivos móviles, pero a partir de 768 píxeles de ancho también se deslizará de derecha a izquierda.
De manera similar a las animaciones, puedes agregar flexibilizaciones personalizadas:
[ data-aos ] {
body [ data-aos-easing = "new-easing" ] & ,
& [ data-aos ][ data-aos-easing = "new-easing" ] {
transition-timing-function : cubic-bezier ( .250 , .250 , .750 , .750 );
}
}La distancia predeterminada para las animaciones integradas es 100 px. Sin embargo, siempre que estés usando SCSS, puedes anularlo:
$ aos-distance : 200 px ; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss' ; Sin embargo, debe configurar su proceso de compilación para permitirle importar estilos desde node_modules de antemano.
Utilice animatedClassName para cambiar el comportamiento predeterminado de AOS, para aplicar nombres de clases colocados dentro de data-aos al desplazarse.
< div data-aos =" fadeInUp " > </ div > AOS . init ( {
useClassNames : true ,
initClassName : false ,
animatedClassName : 'animated' ,
} ) ; El elemento anterior tendrá dos clases: animated y fadeInUp . Usando diferentes combinaciones de las tres configuraciones anteriores, debería poder integrar cualquier biblioteca de animación CSS externa.
Sin embargo, a las bibliotecas externas no les importa demasiado el estado de la animación antes de la animación real. Entonces, si desea que esos elementos no sean visibles antes de desplazarse, es posible que deba agregar estilos similares:
[ data-aos ] {
visibility : hidden;
}
[ data-aos ]. animated {
visibility : visible;
}duration , delayLa duración y el retraso aceptan valores de 50 a 3000, con un paso de 50 ms, es porque son manejados por css, y para no hacer que css sea más largo de lo que ya implementé solo un subconjunto. Creo que deberían cubrir la mayoría de los casos.
De lo contrario, puedes escribir CSS simple que agregará otra duración, por ejemplo:
body [ data-aos-duration = '4000' ] [ data-aos ] ,
[ data-aos ][ data-aos ][ data-aos-duration = '4000' ] {
transition-duration : 4000 ms ;
} Este código agregará una duración de 4000 ms disponible para que usted la configure en los elementos de AOS o la establezca como duración global al inicializar el script de AOS. Tenga en cuenta que el doble [data-aos][data-aos] no es un error, es un truco para hacer que las configuraciones individuales sean más importantes que las globales, sin necesidad de escribir "!important" allí :)
Uso de ejemplo:
< div data-aos =" fade-in " data-aos-duration =" 4000 " > </ div > Desvanecer animaciones:
Animaciones de volteo:
Animaciones de diapositivas:
Animaciones de zoom:
Si encontró un error, tiene una pregunta o una idea, consulte la guía de contribución de AOS y no dude en crear nuevos problemas.
