Nicks Illustration hatte drei verschiedene Schichten für die Köpfe. Sie sind nur leicht unterschiedliche Variationen. Wir könnten die Bilder mit einer Animation oder mit JavaScript oder etwas anderem austauschen, aber eine ständig laufende Animation (oder sogar eine, die jede Seitenladung ausführt) wäre für Benutzer schwerer Foren wahrscheinlich mega-ärgerlich. Stattdessen machen wir daraus ein Osterei, das heißt eine kleine Funktion, die Sie vielleicht nicht bemerken, wenn Sie nicht zufällig darüber stolpern.
Wir tauschen die Bilder aus, wenn die Größe des Browserfensters durch @ media-Abfragen geändert wird. Anstelle von nur einer Handvoll @ media-Abfragen, die die Köpfe ein paar Mal ändern würden, werden wir eine Menge @ media-Abfragen erstellen, die sie alle paar Pixel ändern. Im Wesentlichen den Geist von Arley McBlains "Lark Queries" kanalisieren.
Wir verwenden eine Sass-Schleife, um die vielen benötigten @ media-Abfragen zu erstellen. Letzten Endes:
@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); ) ) )Das Schöne daran ist, dass wir diese zusätzlichen Bilder nur laden, wenn die Seitengröße geändert wird, sodass wir keine zusätzlichen Inhalte nur für ein Osterei laden.