Nick’s illustration had three different layers for the heads. They are just slightly different variations. We could swap out the images with an animation or with JavaScript or something but having an always-running animation (or even one that runs every page load) would probably be mega-annoying for heavy forums users. Instead we’ll make it an Easter egg, that is, a little feature that you might not notice unless you happen to randomly stumble across it.
What we’ll do is swap out the images when the browser window resizes through @media queries. Instead of just a handful of @media queries that would change the heads a few times, we’ll make a crapload of @media queries that change them every few pixels. Essentially channeling the spirit of Arley McBlain’s “Lark Queries.”.
We use a Sass loop to create the many @media queries we need. Ultimately:
@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);
}
}
@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);
}
}
}What’s nice about this is that we don’t load those additional images unless the page resizes so we’re not loading extra stuff just for an Easter egg.
Curious if you can use OR in addition to AND in media queries? That way you could just have two rules (with lots of ORs) rather than lots of rules with ANDs.
That’s a good point! Ultimately I think it’s a horse apiece (it’ll be about the same amount of code, a bit harder to write in a loop, and less repetitive code to be eaten up by gzip).
You do OR’s with commas in media queries, so like
I noticed that if I jiggle around the page’s width for about 10 seconds in a row, I’ll get the old “Aw, Snap! – something went wrong…” message from Chrome, probably having to do with running out of allocated memory, due to so many media queries changing in the background.
I realize that repetitive resizing is not something a user would normally do, but are there any known less consuming alternatives to this method?
Why not just use JS with resize event?