AOS es una pequeña biblioteca para animar elementos en su página a medida que se desplaza.
AOS le permite animar elementos a medida que se desplaza hacia abajo y hacia arriba. Si se desplaza hacia arriba, los elementos se animarán a su estado anterior y estarán listos para animarse nuevamente si se desplaza hacia abajo.
Instalación: Instalar AOS es muy sencillo:
- Agregue la siguiente etiqueta en la etiqueta principal de la página web.
<enlace rel=”hoja de estilo” href=”https://unpkg.com/aos@next/dist/aos.css” />
- Agregue el script justo antes de cerrar la etiqueta </head> e inicialice AOS:
<script src=”https://unpkg.com/aos@next/dist/aos.js”></script>
<script>
AOS.init();
</script>
Eso es todo, ahora ha instalado correctamente aos en su aplicación web.
Establecer animación usando el atributo data-aos :
<div data-aos="fade-in"></div>
Ejemplo: a continuación se muestra un ejemplo para demostrar el efecto de animación.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/aos@next/dist/aos.css" />
<script src=
"https://unpkg.com/aos@next/dist/aos.js">
</script>
<script>
AOS.init();
</script>
<style>
body {
padding: 100vh 0;
}
div {
margin: 0 auto;
color: #fff;
padding: 100px;
font-size: 25px;
width: 50%;
background-color: green;
}
</style>
</head>
<body>
<div data-aos="zoom-in">
Geeks for geeks
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por nagaraju6242 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA