La ilustración de Nick tenía tres capas diferentes para las cabezas. Son variaciones ligeramente diferentes. Podríamos intercambiar las imágenes con una animación o con JavaScript o algo así, pero tener una animación siempre en ejecución (o incluso una que ejecute cada carga de página) probablemente sería mega-molesto para los usuarios de foros pesados. En cambio, lo convertiremos en un huevo de Pascua, es decir, una pequeña característica que quizás no notes a menos que te encuentres con ella al azar.
Lo que haremos es intercambiar las imágenes cuando la ventana del navegador cambie de tamaño mediante consultas @media. En lugar de solo un puñado de consultas de @media que cambiarían las cabezas unas cuantas veces, haremos un montón de consultas de @media que las cambian cada pocos píxeles. Esencialmente canalizando el espíritu de "Lark Queries" de Arley McBlain.
Usamos un bucle Sass para crear las muchas consultas @media que necesitamos. Por último:
@for $i from 25 through 125 ( @media (min-width: (($i+5)*15)+6+px) and (max-width: (($i+5)*15)+10+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-2.png.webp); ) ) @media (min-width: (($i+5)*15)+11+px) and (max-width: (($i+5)*15)+15+px) ( .forum-wrap ( background-image: url(… /wp-content/themes/CSS-Tricks-10/images/header-forums-3.png.webp); ) ) )Lo bueno de esto es que no cargamos esas imágenes adicionales a menos que la página cambie de tamaño, por lo que no cargamos cosas adicionales solo para un huevo de Pascua.