La idea
Para cada ícono medimos la distancia horizontal entre el cursor y su centro. Cuanto más cerca, más grande. Un ícono lejos se queda en su tamaño normal; el que está justo bajo el cursor llega al aumento máximo.
const d = Math.abs(e.clientX - centroIcono);
const escala = Math.max(1, 1.9 - d / 70);
icono.style.transform = `scale(${escala})`;
El 1.9 es el aumento máximo (slider); el / 70 controla qué tan “ancha” es la zona de influencia.
El JavaScript
dock.addEventListener('mousemove', e => {
iconos.forEach(ic => {
const r = ic.getBoundingClientRect();
const d = Math.abs(e.clientX - (r.left + r.width / 2));
ic.style.transform = `scale(${Math.max(1, 1.9 - d / 70)})`;
});
});
dock.addEventListener('mouseleave', () =>
iconos.forEach(ic => ic.style.transform = ''));
El detalle del CSS
Con transform-origin: bottom los íconos crecen hacia arriba (como
en macOS, anclados a la base) y no hacia el centro. Y una transition
corta suaviza el cambio de tamaño.
.dock span{
transform-origin:bottom center;
transition:transform .12s ease;
}
Bonito y simple ✨
Es de esos efectos que parecen complejos pero son una resta y una multiplicación. Sube el aumento al máximo para un dock bien juguetón.