Animar elementos en scroll-AOS

Vista prévia

Descripción

AOS es una biblioteca independiente de JavaScript que utiliza animaciones CSS3 para animar elementos en el desplazamiento vertical de la página.

AOS detecta los eventos de desplazamiento de página y anima los elementos especificados cuando se desplazan a la vista.

Instalación

# Yarn
$ yarn add [email protected]

# NPM
$ npm install [email protected] --save

Funcionamiento

Sólo tiene que añadir aos. CSS y aos. js en la página HTML y ya está listo para ir.

<link rel="stylesheet" href="dist/aos.css">
<script src="dist/aos.js"></script>

Especifique el nombre de la animación utilizando el atributo aos como sigue:

• Fade-up
• fundido de abajo
• fundido a la izquierda
• fundido a la derecha
• Fade-up-right
• Fade-up-left
• fundido de abajo-right
• fundido de abajo-left
• abatible
• abatible
• Flip-Left
• Flip-Right
• deslizable
• deslizable hacia abajo
• deslizante-izquierda
• deslizante derecha
• acercar
• acercar-up
• acercar-down
• acercar-left
• acercar-right
• alejar
• alejar-up
• alejar-down
• alejar-left
• alejar-right

<div class="aos-item" aos="Fade-up">

Element here
</div>

Usted es capaz de config la animación activada por scroll para cada elemento a través de aos-* atributo de como se indica a continuación:

• AOS-offset: 120 – cambiar desplazamiento para desencadenar animaciones tarde o temprano (PX)
• AOS-duración: 400 – duración de la animación (MS)
• AOS-Easing: ' Ease ' – elegir la función de temporización para facilitar los elementos de diferentes maneras: lineal, facilidad, facilidad de entrada, facilidad de salida, facilidad de entrada, facilidad en la espalda, facilidad de salida, facilidad en la parte posterior, facilidad en la seno, Ease-out-sine, facilidad de entrada-seno, facilidad en el Quad, Ease-out-Quad, fácil-in-out-Quad, Ease-in-cúbico, Ease-out-cúbico, Ease-in-out-cúbico, Ease-in-cuart, Ease-out-Quart, facilidad-en-fuera-Quart
• AOS-Delay: 0 – animación de retardo (MS)
• AOS-Anchor: null – elemento Anchor, cuyo desplazamiento se contará para desencadenar la animación en lugar de los elementos reales desfasados
• AOS-ancla-colocación: ' arriba-abajo ' – posición de anclaje – que una posición de elemento en la pantalla debe desencadenar la animación: superior-inferior, superior-centro, superior-superior, centro-fondo, centro-centro, centro-superior, abajo-abajo, centro-inferior, de la parte superior
• AOS-una vez: false – elija la animación de si se activará una vez, o cada vez que se desplace hacia arriba/abajo hasta el elemento

También puede cambiar las opciones de configuración predeterminadas durante init.

AOS.init({

offset:

 120,

delay:


0,

easing:

 'ease',

duration:
 400,

disable:

false, // Condition when AOS should be disabled. e.g. 'mobile'

once:


 false,

mirror:

 false, // whether elements should animate out while scrolling past them

startEvent: 'DOMContentLoaded'
});

Configuración global.

AOS.init({


// accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function

disable: false,


 // name of the event dispatched on the document, that AOS should initialize on

startEvent: 'DOMContentLoaded',


// class applied after initialization

initClassName: 'aos-init',


 // class applied on animation

animatedClassName: 'aos-animate',


 // if true, will add content of `data-aos` as classes on scroll

useClassNames: false


});

Registro de cambios

v3.0.0 beta3 (08/20/2018)

• actualizar