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…
En este artículo te muestro cómo construí un banner visualmente atractivo. El diseño incluye: El efecto final es un banner visualmente potente, perfecto para una sección de inicio llamativa, un portafolio o incluso una landing creativa. Puedes ver la demo en vivo aquí: El código puede verlos aquí
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…
ImageOptim es una aplicación para macOS diseñada para reducir el tamaño de las imágenes sin perder calidad perceptible. Esto no solo mejora el tiempo de carga de los sitios web, sino que también ahorra espacio en disco y ancho de banda. Cómo descargar ImageOptim Cómo usar ImageOptim El uso de…
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 una sección que hice para un sitio web: un carrusel infinito creado con Splide.js. Este carrusel destaca por las siguientes características: Código del Carrusel Asegúrate de incluir la librería Splide.js en tu proyecto. Ten en mente esto, se debe agregar tambien la extension austo scroll para que…