На иллюстрации Ника было три разных слоя голов. Это просто немного разные вариации. Мы могли бы поменять изображения с помощью анимации или с помощью JavaScript или чего-то еще, но наличие постоянно работающей анимации (или даже такой, которая запускает каждую загрузку страницы), вероятно, было бы мега раздражающим для активных пользователей форумов. Вместо этого мы сделаем из него пасхальное яйцо, то есть небольшую особенность, которую вы можете не заметить, если только случайно не наткнетесь на нее.
Что мы сделаем, так это заменим изображения, когда окно браузера изменится с помощью запросов @media. Вместо горстки запросов @media, которые несколько раз меняли бы заголовки, мы сделаем уйму запросов @media, которые меняют их каждые несколько пикселей. По сути, это направление духа «Жаворонок» Арли МакБлейна.
Мы используем цикл Sass для создания множества необходимых нам запросов @media. В конечном счете:
@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); ) ) )Что хорошо в этом, так это то, что мы не загружаем эти дополнительные изображения, если размер страницы не изменится, поэтому мы не загружаем лишний материал только для пасхального яйца.