Menu

Animaciones para tu sitio wordpres

¿Que usar ?

En los últimos años, CSS ha evolucionado de manera impresionante, incorporando nuevas propiedades que han ampliado sus capacidades más allá de la simple estilización de elementos. Ahora, es posible crear animaciones complejas directamente con CSS, algo que antes solo podía lograrse mediante JavaScript y múltiples líneas de código.

En esta página , encontrarás una selección de diseños interesantes y creativos, perfectos para inspirarte y explorar las posibilidades que ofrecen las animaciones en CSS. Sin embargo, hay un desafío importante: muchas de estas animaciones aún son experimentales y no cuentan con compatibilidad total en todos los navegadores, lo que puede afectar la experiencia del usuario en ciertos entornos.

Surge la duda: ¿que usar CSS o JS?

Una de las principales ventajas de utilizar exclusivamente CSS para animaciones es su simplicidad: no es necesario tener conocimientos de programación para crear efectos visuales atractivos. Esto lo convierte en una excelente opción para diseñadores y desarrolladores que buscan soluciones eficientes sin depender de JavaScript.

Por otro lado, el uso de JavaScript en animaciones garantiza compatibilidad total entre navegadores, asegurando que los efectos funcionen correctamente sin importar el entorno o dispositivo utilizado por el usuario. Esta flexibilidad es crucial cuando se requiere un comportamiento uniforme en plataformas donde CSS aún presenta limitaciones debido a la falta de soporte en algunos navegadores.

Para encontrar un equilibrio entre facilidad de implementación y compatibilidad, presento una solución híbrida que combina lo mejor de ambos enfoques: CSS para el diseño y la animación, complementado con un pequeño script en JavaScript que garantiza su funcionamiento en todos los navegadores. Esta aproximación permite que cualquier persona con conocimientos básicos en programación pueda integrar la animación sin dificultades, asegurando una experiencia visual fluida y consistente para todos los usuarios.

Codigo CSS

/* Definición de la animación moveRight */
@keyframes moveRight {
 from {
opacity: 0;
transform: translateX(-100px); /* Comienza fuera a la izquierda */
}
to {
opacity: 1;
transform: translateX(0); /* Aparece en su posición original */
}
}

/* Elementos por defecto */
.block {
visibility: hidden;
animation-fill-mode: forwards;
transition: visibility 0.3s ease;
}

Codigo js

<script>
document.addEventListener(‘DOMContentLoaded’, () => {
    const elements = document.querySelectorAll(‘.block’); // Selecciona solo los elementos con la clase
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                // Activar el fade-in al entrar en el viewport
                entry.target.style.animation = ‘moveRight 1s ease-out forwards’;
                entry.target.style.visibility = ‘visible’; // Asegurar visibilidad
            } else {
                // Activar el fade-out al salir del viewport
                entry.target.style.animation = ‘moveLeft 1s ease-out forwards’;
               entry.target.style.visibility = ‘hidden’; // Ocultar cuando salga
            }
        });
    });
 elements.forEach(element => observer.observe(element)); // Observar cada elemento
});
</script>

Explicación de la solución

Es importante que la clase block se asigne a todos los elementos que deseas animar para que el efecto se aplique correctamente. Espero que esta solución te sea útil. Si tienes alguna pregunta o necesitas ayuda adicional, no dudes en escribirme. ¡Estaré encantada de ayudarte!

Scroll to Top