I took a break from work and began some small, private initiatives (toys). A kind of small initiatives is potato.horse the place I maintain all of my doodles, visible quick tales and jokes. Test it out!
Nonetheless, this put up shouldn’t be about my break from work, different experiments, or the positioning itself. Individuals appear to love one explicit approach I used within the design, notably, the background impact utilized that transitions between colours when the person browses the content material:
Some requested me how this impact was carried out (together with going so far as studying the minified code, which could be very flattering).
So, right here’s a fast gist, adopted up with some context:
export const useRainbowBg = () =>
useEffect(() => {
const cb = () => {
const viewportHeight = window.innerHeight
const contentHeight = doc.physique.getBoundingClientRect().top
const viewportsPerRotation = Math.min(
3,
contentHeight / viewportHeight
)
const from = 51
const progress =
window.scrollY / (viewportHeight * viewportsPerRotation)
const h = (from + 360 * progress) % 360
doc.physique.fashion.backgroundColor = `hsl(${h}deg, 100%, 50%)`
}
window.addEventListener(‘scroll’, cb, { passive: true })
return () => window.removeEventListener(‘scroll’, cb)
})
In brief, I map the scroll place into the hue within the HSL colour notation. Let’s break this down.
Colour fashions
There are lots of methods of describing colours in CSS, with the 2 commonest ones being RGB (left) and HSL (proper):
RGB is an additive colour palette. Because of this mixing 100% of pink, inexperienced and blue produces white, mixing 100% pink and 100% inexperienced however 0% blue produces yellow, and so forth. That is completely different from, say, utilizing oil paint or the CMYK colour mannequin, the place the ensuing tone could be black(-ish)1.
We’re used to this method as a result of it’s simple to explain in code, however specifying colours when it comes to hue, saturation and luminosity appears extra pure, particularly in case you come from a design background, or… you recognize, are a human being utilizing a human language.
We’ve gotten used to RGB as builders, however in spoken language, utilizing it will really feel unnatural and complicated. Façade could be very onerous to make use of in RGB.
Alternatively, HSL can typically be way more intuitive to work with. As an illustration, if I wish to make a colour barely colder, I can simply transfer the hue slider a bit in direction of blue and I ought to get nearer to what I take into consideration. With RGB, if we make the colour seem colder by together with extra blue, the ensuing tone will likely be a bit brighter because the blue element contributes to the general lightness. Because of this you’d need to decrease the pink and inexperienced values to compensate.
To see how this works in follow, strive maxing out the blue colour within the instance under.
The very first thing that stands out is that every one tones are shifted in direction of blue and the general brightness of the image is elevated. Within the case of the impact we’re discussing, that might be undesirable.
Now, let’s attempt to do the identical with the HSL colour circle. Drag the slider to the left, by ca. 90 levels:
On this situation, utilizing HSL not solely turns Susan right into a vampire, but in addition maintains an identical2 stage of brightness. And that’s precisely what I’m in search of.
So, what I imply by saying this:
How does this work? In brief, I map the scroll place into the hue within the HSL colour notation. Rafal, 2 days earlier
…is that that each time we detect a scroll occasion, I attempt to map it to an angle on the hue circle:
I didn’t wish to begin with pink as it will make me hungry and the bottom yellow matches the design a bit higher, so I utilized a small preliminary shift—therefore const from = 51 set because the preliminary offset.
And, so far as the essential implementation goes, that’s it!
Now, there are three different areas of enchancment.
useRainbow efficiency
We’re triggering a repaint on each scroll, so I used to be a bit anxious that older cellular gadgets, and even some hi-end laptops plugged in to 4k screens may not have the ability to preserve stable 60fps. However, I’m pleased with the outcomes to this point. Utilizing passive occasion listeners supplied a little bit of a lift, particularly on cellular.
If I understand that efficiency is an issue, particularly with extra content material down the road, I’ll most likely give attention to:
eradicating the pointless name to getBoundingClientRect on each scroll handler name, anddeferring or throttling background colour modifications utilizing requestAnimationFrame.
I anticipate the primary enchancment to have some impression, however the advantages of the second needs to be negligible.
Measure earlier than optimizing. Obsessing in regards to the efficiency solely is sensible when points develop into noticeable, be it by a drop in framerate or battery impression. Your iPhone Professional has extra computing energy than many low-end laptops, so it’s a good suggestion to check on these gadgets too. It’s good to have a crappy previous Android cellphone exacly for that objective in case you can spare a couple of quid.
Perceptually uniform colour areas
You may’ve seen that within the earlier illustrations some absolutely saturated colours appeared darker than others. That’s as a result of the colour areas we usually use when coding don’t replicate the way in which the human eye works. I’ll depart the in-depth rationalization to somebody way more skilled than me, however suffice to say (gross oversimplification alert!) that, typically, the identical quantity of pink/inexperienced/yellow will seem brighter than blue. Because of this in some circumstances the textual content on the web page will likely be tougher to learn.
For now, this isn’t a problem as I’ve simply put this factor on-line and titles serve a secondary objective. However there’s an answer to the issue and it’s not overly sophisticated: use a perceptually uniform colour area. There’s a bunch of libraries that do it out of the field, each in JavaScript/TypeScript and CSS/Sass/<choose your CSS taste right here>. hsluv looks like place to begin.
Accessiblity
Notice that I’ll be specializing in the visible impact itself and never discussing the remainder of the positioning (e.g. alt tags, doc construction, and many others…). I’d prefer to give attention to distinction, colour blindness and individuals who depend on prefers-reduced-motion. The positioning is a residing doc; there’s all the time a lot to enhance. As an illustration, distinction could be a problem in a couple of, non-critical locations. I’m pleased to just accept suggestions and implement it: hit me up!.
colour blindness
I wished to ensure that the impact doesn’t break the positioning fully for individuals with colour blindness. So I targeted on the commonest varieties: deuteranomaly and protanomaly (red-green colour blindness), but in addition ran wider exams. I used Photoshop and Colorblindly (Chrome extension) for some rudimentary checks.
prefers-reduced-motion
The prefers-reduced-motion CSS media function is used to detect if the person has requested that the system decrease the quantity of non-essential movement it makes use of.
—MDN
This website doesn’t include many animations (in addition to the Little Sausage Angels you’ll see in case you hit “Share”), however I used to be questioning if individuals who depend on prefers-reduced-motion would really like the background colour to remain fixed.
The quick reply is: I don’t know. My instinct is that rotating colours don’t actually qualify as movement, however my expertise and understanding of the issue is, to say the least, restricted. In conditions like this, I’d somewhat rely on person analysis than guesses.
Fortunately, the positioning had its 5 minutes of fame on Reddit which proved to be an honest alternative to gather suggestions. Not one of the customers introduced up a problem with the background impact to this point. I’m additionally fortunate sufficient to know a bunch of accessibility specialists, akin to Sandrina Pereira. Her suggestion was that (a) background animations undoubtedly qualify as movement, and (b) maybe the impact feels pure as a result of it’s a direct results of a person interplay.
Abstract
The late-90s Geocities net felt playful and peculiar. It was enjoyable in an uninhibited, considerably much less performative, means. I wished to include a few of this feel and appear within the website. However nonetheless, I didn’t wish to make it really feel esoteric to the purpose the place you’d have to up your hipsterdom-level to 9000 and browse it completely throught Netscape 7. All of that, whereas listening to the brand new Nirvana Unplugged album.
I nonetheless wished first rate UX on cellular and desktop, and a few area for easter eggs (one thing you may’t do when residing within the unusual and abusive relationship with social media we’ve grown so accustomed to).
As a child, I had constructed six web sites earlier than I even obtained entry to the Web for the primary time. Now, after being burned out for 3 years, even contemplating altering my job, it was the primary time I genuinely loved coding. I forgot how a lot enjoyable it was!
Now, exit, pet your cat, and make stuff!
P.S. Take a look at Cameron’s World.
P.P.S. The code for interactive diagrams could be discovered on GitHub.
Footnotes
Therefore the Okay element in CMYK which means “black.” Utilizing B could be complicated because it means “blue” in different colour fashions. ⮑It’s not excellent because the perceptual colour area differs from what’s described utilizing RGB/HSL. ⮑
useRainbow() initially revealed on CSS-Tips. You must get the e-newsletter and develop into a supporter.
Subscribe to MarketingSolution.
Receive web development discounts & web design tutorials.
Now! Lets GROW Together!