En muchos sitios web vemos footers fijos o footers que aparecen únicamente al final del scroll. En este ejemplo vamos a combinar lo mejor de ambos mundos: un footer que se mantiene abajo todo el tiempo, pero que solo se hace visible cuando el contenido termina, como si estuviera escondido…
Usar un video de Vimeo como fondo puede darle vida a cualquier sección de un sitio web. Sin embargo, lograr que el video se adapte a cualquier tamaño de pantalla y mantenga la proporción correcta puede ser un reto. En este post te muestro cómo hacerlo de forma simple con…
Cuando trabajamos con galerías de videos en la web, lo normal es apoyarnos en librerías externas o depender de los controles nativos del navegador. Sin embargo, con un poco de JavaScript puro (vanilla JS) podemos tener un control total sobre la experiencia de usuario. En este artículo te mostraré cómo…
Hoy te comparto un proyecto que combina rendimiento y creatividad: una animación cuadro por cuadro que se activa a medida que el usuario hace scroll. Una secuencia de imágenes que se cargan y cambian dinámicamente con JavaScript y GSAP (GreenSock Animation Platform). El objetivo: simular una animación suave y responsiva,…
En este post, te mostraré cómo crear una animación de texto con efecto 3D utilizando GSAP y ScrollTrigger. ¿Qué vamos a lograr? Vamos a animar varias palabras para que aparezcan y desaparezcan con un efecto de desplazamiento vertical y rotación 3D, sincronizado con el scroll. Cada palabra entrará desde abajo,…
Los acordeones son un patrón común en interfaces web para mostrar y ocultar información de manera interactiva. Tradicionalmente, se han implementado con JavaScript y CSS, pero HTML ofrece una alternativa nativa con la etiqueta details, simplificando su uso y mejorando la accesibilidad. Resultado Implementación con <details> El siguiente código muestra…
Quiero compartir un efecto visual que anima el espaciado de las letras al interactuar con los enlaces de una página web. Este efecto es sencillo de implementar y añade un toque de dinamismo a tus diseños. Código HTML La estructura HTML consta de varias secciones con un contenedor que incluye…
Algunas veces en diseños se necesitan textos flotantes que dependiendo del fondo se pueden perder, pero existe una opción con css para que estos objetos puedan ser siempre legibles. Por ejemplo cuando diseñamos una navegación en la web, a menudo enfrentamos el reto de asegurarnos que el texto sea legible…
Hoy quiero compartir un sencillo y atractivo efecto de introducción que he creado para un sitio web. Utiliza el plugin Typed.js, ideal para simular una máquina de escribir que escribe y despliega textos dinámicamente. Este efecto es perfecto para capturar la atención de los usuarios en la página de inicio…