4 ms·
I forget the name of the effect, but it's the one where the background may have images that move at different rates as the page scroll increases. Over the yea
by geuis 4y ago
I forget the name of the effect, but it's the one where the background may have images that move at different rates as the page scroll increases.
Over the years I've seen many, many terrible implementations of that effect with JavaScript.
The correct and highly performant way to do that is using perspective. It's an effect that can be done entirely in css.
- SCUSKU 4y agoParallax?
- geuis 4y agoYah, thanks. Brain fart.
- bradwoodsio 4y agoI think you mean parallax scroll?
- geuis 4y agoThat's it! Thanks.
- kroltan 4y agoParallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ https://www.firewatchgame.com/ Not only the parallax itself, but the creativity! They used semitransparent layers so that when you scroll it looks like there are specular reflections! (the glittery specks of light)
- slimsag 4y agoInteresting, it's laggy even on my M1 macbook + Firefox.
- bmicraft 4y agoWeird, doesn't lag at all here on Firefox/X11 on my amd igpu notebook
- justsomehnguy 4y agoIt's not performance laggy, it's moving the layers. Probably something wrong with the math, because if take the scrollbar and move it slowly you would notice how some layers starts to bob up and down, instead of monotonic movement.
- kroltan 4y agoThe math seems fine, but they didn't hint the browser to not snap the images to the pixel grid, so scrolling very slowly means a lot of the layers will move less than 1 pixel per frame, which causes the bobbing.
- LoganDark 4y agoThat's because the layers are missing a `will-change: transform` property. Adding said property fixes it right up for me. I was tipped off by it being suddenly super smooth for a second, meaning that the browser was probably applying some heuristic. I added `will-change: transform` and boom. Real-world example of its usefulness!
- kroltan 4y agoI think this website predates the widespread support of will-change, the website first displayed this parallax effect (in a more primitive way) sometime in 2014. caniuse.com tells me the first moment that both Firefox and Chrome supported this property was in early 2015.
- LoganDark 4y agoInteresting. Is it possible that the addition of `will-change` caused browsers to relax their default heuristics, believing that websites would use the property as needed now that it's available?