Añadir animaciones activadas por desplazamiento
Senior SEO-specialist
Las animaciones activadas por desplazamiento hacen que tu sitio web sea más dinámico sin sobrecargar los tiempos de carga. Atraen la atención, mejoran la experiencia y hacen que los elementos importantes destaquen en el momento adecuado. En este artículo, te explico cómo implementarlo técnicamente bien: ligero, responsive y a prueba de SEO.
1. Cuando las animaciones de desplazamiento tienen sentido
Utiliza animaciones de desplazamiento para resaltar sutilmente elementos concretos, por ejemplo:
- USP o estadísticas
- Bloques CTA
- Testimonios
- Gráficos o pasos del proceso
- Elementos de la cartera
Nota: utiliza la animación de forma funcional. No exageres, pero apoya tu mensaje.
2. ¿Qué técnica eliges?
Hay varias formas de crear animaciones de desplazamiento. La elección depende del tamaño de tu proyecto y de tu pila tecnológica.
Opciones populares:
- AOS.js – Ligero, fácil de integrar
- ScrollTrigger (GSAP) – Más control, pero más pesado
- Intersection Observer API – JavaScript nativo, no se necesitan bibliotecas externas
Para sitios SEO-friendly, suelo preferir AOS.js o Intersection Observer.
3. Animaciones de desplazamiento con AOS.js (configuración rápida)
AOS (Animate On Scroll) es rápido de añadir y funciona bien sin conocimientos de JavaScript.
Paso 1: Añade el AM
html
<!-- Head -->
<link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet">
<!-- Footer -->
<script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script>
<script>
AOS.init();
</script>
Paso 2: Añade datos-aos a tus elementos HTML
html
<div data-aos="fade-up">Inhoud die infade bij scrollen</div>
<div data-aos="zoom-in" data-aos-delay="200">Met vertraging</div>
Puedes variar con: fundido, deslizamiento, zoom, voltear, duración, retardo, etc.
Aan de slag met SEO? Neem gerust contact op.
4. Animaciones de desplazamiento con Observador de intersección (JS nativo)
Para quienes prefieren trabajar sin scripts externos, la API del Observador de Intersección es una solución ligera y flexible.
Ejemplo:
html
<div class="fade-in">Tekst of afbeelding</div>
<style>
.fade-in {
opacity: 0;
transform: translateY(20px);
transition: all 0.5s ease;
}
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}
</style>
<script>
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if(entry.isIntersecting) {
entry.target.classList.add('visible');
}
});
});
document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>
Ventaja: sin dependencias, control total sobre el comportamiento y el estilo.
5. Mejores prácticas (para SEO, UX y rendimiento)
- Utiliza animaciones sólo si son funcionales
- Añade soportede prefiere-movimiento-reducido para accesibilidad
- Carga JS y CSS async/defer cuando sea posible
- Evita animar imágenes grandes o bloques DOM pesados
- Prueba en móvil y CPU baja (Lighthouse / DevTools)
En conclusión
Las animaciones activadas por desplazamiento refuerzan visualmente tu sitio, siempre que se desplieguen correctamente. Utilízalas para guiar la atención, apoyar la interacción y dar estructura al contenido. Con herramientas como AOS.js o JavaScript nativo, puedes implementarlas rápida y eficazmente.
