Este artículo de blog detalla una actualización de un portafolio web, implementando un efecto visual inusual y nostálgico: un sitio web que se estira y se comprime al redimensionar la ventana del navegador, pero luego vuelve a su tamaño original. La autora, Lynn Fisher, buscaba una solución simple y divertida para evitar el estrés durante la temporada de festividades, inspirándose en la estética de los sitios web de diseño fijo de antaño.
¿Cómo funciona? La clave está en el uso de JavaScript y la función scale() de CSS. Normalmente, el texto fluye y se adapta al tamaño del contenedor, pero para lograr el efecto deseado, el texto se estira de forma no proporcional. El código JavaScript utiliza un ResizeObserver para detectar cambios en el tamaño de la ventana del navegador. Este observador calcula un factor de escala (scaleX) basado en la diferencia entre el ancho actual de la ventana y el ancho fijo del contenedor de contenido (436px). Este factor se aplica a la propiedad transform: scale() del contenedor principal, estirando o comprimiendo el contenido. Para evitar que el contenido se invierta horizontalmente al reducir el tamaño de la ventana, se utiliza Math.max() para limitar el valor de scaleX. Finalmente, se implementa un Timeout y un EventListener para restablecer la transformación y el ancho de la ventana al dejar de redimensionar, creando el efecto de 'rebote'.
Aplicaciones y Casos de Uso: Aunque principalmente un ejercicio creativo, este efecto puede ser utilizado para crear experiencias web únicas y sorprendentes. Es ideal para diseñadores y desarrolladores que buscan experimentar con la interactividad y la nostalgia. El efecto es especialmente llamativo y se adapta bien a un portafolio personal, como en este caso.
Consideraciones: El efecto funciona mejor con un ancho de contenido fijo (436px) para mantener la ilusión de elasticidad. Para dispositivos móviles, el sitio vuelve a un diseño responsivo estándar. La autora también destaca la importancia de los detalles visuales, como el uso de texturas inspiradas en libros de tapa blanda y un diseño de foco personalizado para los enlaces. El uso de outline-offset y la corrección del box-shadow son ejemplos de cómo se abordaron problemas técnicos específicos para lograr el aspecto deseado. La autora también menciona que en 2026, el portafolio cumplirá 20 años de refrescos, lo que invita a la reflexión sobre la evolución del diseño web y su impacto en su trabajo.