Recurso para la comunidad dev

Vertical Split Slider — Efecto de caída por secciones
HTML + CSS + JS puro

Un slider visualmente impactante que divide cada imagen en columnas verticales que “caen” de forma secuencial. Código ligero, sin librerías, pensado para que lo uses y modifiques a tu gusto.

Ver en CodePen / Descargar

Cómo funciona

FAQ

Demo del slider

Animación fluida

Efecto de caída sincronizado por columnas con delays escalonados.

100% Responsive

5 columnas en desktop y 3 en móvil. Ajuste fino sin líneas entre slices.

Código ligero

HTML, CSS y JS puro. Fácil de entender, adaptar y versionar.

Estética cuidada

Tipografía nítida, efectos glass y paleta cálida Alberto Freelance.

Listo para integrar

Úsalo como hero de landing, presentación o galería.

Open & extensible

Añade autoplay, controles, o intégralo con Laravel/Livewire.

Crea y publica en minutos

Crea un slider moderno, dinámico y nítido

Vertical Split Slider divide cada imagen en láminas verticales con una caída fluida. HTML/CSS/JS puro, responsive (3/5 columnas), animación controlable y estilo listo para destacar en tu hero.

Precisión en cada slice

El diseño se alinea al píxel perfecto, sin líneas fantasma ni desajustes entre secciones.

Código ligero y limpio

Sin dependencias innecesarias: rendimiento optimizado y cargas ultrarrápidas.

Adaptable a cualquier pantalla

Total control del responsive: fluido, estable y sin sorpresas entre dispositivos.

Cómo funciona Vertical Split Slider

Un slider por láminas verticales con efecto de caída, construido en HTML + CSS + JS puro. Nítido en todas las densidades, ligero y totalmente controlable por código.

Sin dependencias y con performance a prueba de auditorías.
Responsive consistente: 3 columnas en móvil · 5 en desktop con background-size dinámico.
Sin hairlines: solape subpíxel gapfix y compensación de ancho en el último slice.
Animación controlable: delays escalonados, tiempos y nº de columnas configurables.
Integración fácil: ideal para Laravel/Blade, Livewire o cualquier stack.

Ver en CodePen / Descargar

Snippet clave

Tamaño del background por breakpoint

                                function updateBackgroundSize() {

                                  const isMobile = window.innerWidth <= 768;

                                  const visible = isMobile ? 3 : 5;

                                  const size = `\${visible * 100}% 100%`;

                                  document.querySelectorAll('.slice')

                                    .forEach(s => s.style.backgroundSize = size);

                                }

Resultado: cada slice muestra su tercio/quinto exacto, sin estirar ni recortar y con calidad nítida.

Descárgalo, úsalo y comparte

Esto es para la comunidad. Si te ayuda, compártelo o enlázalo. ¿Mejoras o ideas? Estaré encantado de ver tus forks.

Abrir en CodePen Preguntas frecuentes

FAQ

¿Puedo usarlo en proyectos comerciales?

Sí, úsalo libremente. Agradezco mención o enlace a esta página si puedes 💛.

¿Cómo cambio el número de columnas?

Ajusta los nth-child, el background-size y los delays. En móvil van 3; en desktop, 5.

¿Y si aparecen líneas entre slices?

Usa un pequeño solape en márgenes y compensa el ancho en el último slice. En la demo ya está resuelto.

¿Puedo integrarlo con Laravel/Blade?

Sí. Inserta el bloque del slider en un componente Blade y carga los assets donde prefieras.

Full Stack Developer

Alberto Carrión

Full Stack Developer con más de 30 años de experiencia en el mundo digital, especializado en tecnologías como HTML, CSS, JavaScript, Tailwind, Laravel, N8N e Inteligencia Artificial.

0% Creativo

Pensar fuera del marco, pero con resultado dentro del brief.

0% Inquieto

Investigando, Iterando, mejorando… loop infinito.

0%50%100%

0% Perfeccionista

Pixel-perfect, query-perfect, todo-perfect.

Tecnologías aplicadas en proyectos

HTML5
CSS3
JavaScript
PHP
Laravel
Tailwind CSS
Vue.js
n8n
SEO
Wordpress
HTML5
CSS3
JavaScript
PHP
Laravel
Tailwind CSS
Vue.js
n8n
SEO
Wordpress