Un carrusel de tecnologías parecía correcto al cargar, pero algunos logotipos desaparecían en los extremos, el recorrido terminaba con un salto y quedaba demasiado espacio antes de la sección siguiente. Era un detalle visual, aunque afectaba a la percepción de calidad de toda la landing.
El recorte no siempre está en el propio logo
En un slider intervienen el contenedor visible, la pista que se mueve, el ancho de cada elemento, la separación y la transformación CSS. Si cualquiera de esos cálculos no coincide, el último elemento puede quedar fuera o la animación puede reiniciarse antes de tiempo.
Qué revisé
- Anchura real del contenedor y su
max-width. overflowaplicado en cada nivel.- Tamaño y relación de aspecto de los logotipos.
- Distancia total que recorría la pista.
- Duplicación necesaria para crear un bucle continuo.
- Espaciado vertical de la sección.
Una animación continua necesita dos secuencias compatibles
Para evitar el salto, la segunda secuencia debe repetir la primera y la transformación debe terminar exactamente cuando ambas ocupan la misma posición visual. Si se calcula con porcentajes sobre un ancho diferente, aparece un hueco.
Ajusté la pista para que el contenido determinara su tamaño, normalicé los elementos y limité el recorte al contenedor exterior.
Logotipos diferentes, cajas consistentes
WordPress, WooCommerce o una herramienta analítica no tienen la misma proporción. Forzarles la misma anchura de imagen deforma la percepción. Utilicé una caja común con altura controlada y object-fit: contain, manteniendo cada marca proporcionada.
Responsive y accesibilidad
En móvil reduje separación y altura sin convertir los logotipos en miniaturas. También respeté la preferencia de movimiento reducido: si el usuario desactiva animaciones, la lista permanece visible y usable.
El resultado no fue añadir más velocidad ni efectos, sino eliminar el ruido: recorrido continuo, altura razonable y transición limpia hacia el contenido siguiente.