Si alguna vez has mirado un sitio web y pensado: “¡Wow! ¿Cómo lograron ese efecto tan fluido?”, este artículo es para ti. Hoy te voy a revelar un truco con CSS y JavaScript que te permitirá crear animaciones elegantes y dinámicas que dejarán a todos preguntándose cómo lo hiciste.
El Truco: Animaciones de Entrada Suaves con CSS y JS
La clave para crear animaciones que se vean profesionales está en dominar la combinación de CSS transitions, keyframes y el uso inteligente de JavaScript para controlar cuándo y cómo se disparan estas animaciones.
Configurando la Base con CSS
Para este truco, vamos a usar @keyframes para definir una animación de entrada personalizada y transform para darle ese toque de suavidad.
CSS
/* Definimos la animación */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Aplicamos la animación */
.element {
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
En este código:
Finaliza con el elemento en su posición original y completamente visible (opacity: 1).
La animación comienza con un elemento invisible (opacity: 0) y un desplazamiento hacia abajo (translateY(30px)).
Activando las Animaciones con JavaScript
Aunque CSS puede manejar animaciones básicas por sí solo, el verdadero poder viene cuando las controlamos dinámicamente con JavaScript.
JavaScript
// Seleccionamos todos los elementos que queremos animar
const elements = document.querySelectorAll('.element');
// Función para añadir la clase 'visible' cuando el elemento está en el viewport
const revealOnScroll = () => {
elements.forEach((el) => {
const rect = el.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
el.classList.add('visible');
}
});
};
// Escuchamos el evento de scroll
window.addEventListener('scroll', revealOnScroll);
// Disparamos la función al cargar la página
revealOnScroll();
En este código:
Esto mejora el rendimiento porque evita animar elementos que el usuario no está viendo.
Los elementos con la clase element se animarán únicamente cuando entren en el viewport.
Juntándolo Todo
Ahora ajustamos los estilos para integrar la animación y el JavaScript:
CSS
.element {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.element.visible {
opacity: 1;
transform: translateY(0);
}
El resultado:
Los elementos aparecen suavemente desde abajo cuando el usuario los ve por primera vez. El efecto es elegante, pero no distrae.
Ejemplo Complejo: Animaciones por Sección
Digamos que quieres aplicar diferentes animaciones a elementos según la sección de la página. Así podrías hacerlo:
JavaScript
const sections = document.querySelectorAll('.section');
const animateSections = () => {
sections.forEach((section) => {
const rect = section.getBoundingClientRect();
if (rect.top < window.innerHeight && rect.bottom > 0) {
section.classList.add('animate');
}
});
};
window.addEventListener('scroll', animateSections);
animateSections();
CSS
.section {
opacity: 0
transition: opacity 1s ease-out;
}
.section.animate {
opacity: 1;
}
De esta forma, puedes tener animaciones personalizadas por cada sección, ideal para landing pages o sitios dinámicos.
¡Deja a Todos Impresionados!
Con este truco, puedes transformar incluso los diseños más simples en experiencias visuales impactantes. Los usuarios no solo recordarán tu sitio web, ¡querrán saber cómo lo lograste!
Recuerda que la clave está en mantener las animaciones sutiles y en no abusar de ellas. Menos es más cuando hablamos de diseño visual.
Fernando Morales
/
CEO, Designed By We
Descubre más desde Designed By We
Suscríbete y recibe las últimas entradas en tu correo electrónico.
