A ilustração de Nick tinha três camadas diferentes para as cabeças. Eles são apenas variações ligeiramente diferentes. Poderíamos trocar as imagens com uma animação ou com JavaScript ou algo assim, mas ter uma animação sempre em execução (ou mesmo uma que execute a cada carregamento de página) provavelmente seria mega-irritante para usuários de fóruns pesados. Em vez disso, faremos dele um ovo de Páscoa, ou seja, um pequeno recurso que você talvez não perceba, a menos que o encontre aleatoriamente.
O que faremos é trocar as imagens quando a janela do navegador for redimensionada por meio de consultas @media. Em vez de apenas um punhado de consultas @mídia que mudariam de cabeça algumas vezes, faremos um monte de consultas @mídia que as alteram a cada poucos pixels. Essencialmente canalizando o espírito das “Lark Queries.” De Arley McBlain.
Usamos um loop Sass para criar as muitas consultas @media de que precisamos. Em última análise:
@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); ) ) )O que é bom nisso é que não carregamos essas imagens adicionais, a menos que a página seja redimensionada, portanto, não estamos carregando coisas extras apenas para um ovo de Páscoa.
