4 ms·

Parallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ https://www.firewatchgame.com/ Not onl

Parallax. 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 ago
Interesting, it's laggy even on my M1 macbook + Firefox.
- bmicraft 4y ago
  Weird, doesn't lag at all here on Firefox/X11 on my amd igpu notebook
- justsomehnguy 4y ago
  It'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 ago
    The 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 ago
  That'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 ago
    I 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 ago
      Interesting. 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?

4 ms·

Parallax. My favorite implementation is on the homepage of Campo Santo's Firewatch game: https://www.firewatchgame.com/ https://www.firewatchgame.com/ Not onl

by kroltan 4y ago

slimsag 4y ago
Interesting, it's laggy even on my M1 macbook + Firefox.
- bmicraft 4y ago
  Weird, doesn't lag at all here on Firefox/X11 on my amd igpu notebook
- justsomehnguy 4y ago
  It'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 ago
    The 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 ago
  That'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 ago
    I 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 ago
      Interesting. 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?