Perú

Perú

+51 952051956
Contáctanos por Whatsapp
Menú

Animar con libreria AOS en scroll elementos html

Manual Web  -->  Animaciones Web
Fecha Publicación:       09 de Enero de 2020
Fecha Modificación:       15 de Febrero de 2021

 

Demo Página Oficial:

http://michalsnik.github.io/aos/

Ejemplo AOS de nuestra web hacer clic:

Repositorio Github

https://github.com/michalsnik/aos

Licencia

Aos tiene licencia bajo el Licencia MIT

https://github.com/michalsnik/aos/blob/next/LICENSE

Instalación Basica:

 → Descargar Aos

Add styles in <head>:

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />


Importante Agregue script justo antes de cerrar la etiqueta </body> e inicialice AOS, si lo agrega dentro del head no funcionara :

 <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
 <script>
    AOS.init();
 </script>
 
Configuración predeterminada al solo poner init().
<script>
// 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

});
</script>

Establecer animación usando el atributo data-aos:

<div class="item" data-aos="fade-up">fade-up</div>

Ajuste el comportamiento utilizando los 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>


Predefined options:

Animations

Fade animations:

fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
Flip animations:

flip-up
flip-down
flip-left
flip-right
Slide animations:

slide-up
slide-down
slide-left
slide-right
Zoom animations:

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

Anchor placements:

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

Easing functions:

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

 

See the Pen AOS - animations by alex huiza (@alextutor) on CodePen.


Otro ejemplo en vivo:
Articulo : 3867 - Veces Leidas
Compartir Articulo:
Volver indice Volver Atras