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 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,…
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…
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…
En este artículo, mostraré cómo lograr un efecto donde los títulos de una lista de proyectos permanecen «fijos ó «sticky» mientras están visibles en el viewport. Para esto, usaremos la poderosa librería GreenSock (GSAP) y su plugin ScrollTrigger. Este es ideal para resaltar información clave en tus desarrollos web. Ahora,…
Hace poco hice una web donde la primera sección tenía un texto horizontalmente largo y la idea era que para ver la siguiente sección se tuviera que recorrer todo ese texto. Gracias a la librería GSAP pude lograrlo, y quiero compartir el código por si alguien más lo necesita. Ejemplo…