CSS Perspective
After a decade at Twitter, I decided to dedicate the next year to learning new things. It’s not that you can’t learn things at a large corporation, but your primary role is to get stuff done with what you have. As such, I’m something of an expert in wrangling small changes into the website of a microblogging social network, but not much else.
At the new place, more details later, I allowed myself the chance to code up the logged-out home page. As a pure marketing page, it’s the kind of thing I haven’t built since my time in London knocking out microsites. I believe HTML and CSS layout are an underrated skill. I was looking forward to finding new tricks and techniques.
Something I’ve seen everywhere, can’t say I’ve loved it but it can be fun, is scrolling effects. I was hoping to implement a couple of effects, nothing too annoying. I was also hoping to do as much as possible in CSS, without JavaScript. I generally believe it’s easier to get smooth transitions in CSS.
The part of the page I wanted to talk about here wanted parallax effects during scroll. That is, some parts of the page would move faster than others as you scroll. Some googling showed me that there are indeed new CSS techniques for this. Let’s take a look:
https://medium.com/@johnearle/all-in-perspective-2996ee463509
You add effects to the scroll wrapper. And translate the objects. Neat!
The difficulties arise when you do this on the whole page. On an html document, the scrolling is on the html element itself, in JavaScript the documentElement. Perspective tricks won’t apply at that level.
My next solution was to move scrolling onto the body element. That worked, but caused problems later. Other libraries expect window.scrollTo to work. My scrolling functions needed a fix; my modal popup library just refused to work.
I found a cool blog post that suggested large scrolling subpanes. That was clever, but often caused the wrong effect, if your mouse was in the wrong place when you scroll. I quickly backed out of it.
My ultimate solution was to use JavaScript. It seems just as smooth and takes very little code. Seems a shame though.
This kind of thing is a great demonstration of how hard it can be to build websites. The tools are there but when you apply them, they fail in unexpected ways - I didn’t know that applying the css to the html element would be different from a div. Workarounds can cause odd side effects, like breaking the scroll-to-top when navigating. The best fix feels against “best practice” because I need to use JS as well as CSS. And googling just takes you in circuits of stackoverflow. Sigh.
I’m glad we have more tools, and that so many bugs and browser quirks have been addressed. But I’m sad that basic features are still hard to build.
The finished page is over at frec.com. On a desktop-size screen you’ll see the elements with perspective around the interest rates. I still need to fine-tune their depths; there's always more to do. Let me know what you think.
Thanks for reading! I guess you could now share this post on TikTok or something. That'd be cool.
Or if you had any comments, you could find me on Threads.
Published