A good CSS implementation of parallax

** Edit: I got the 3rd option to work in firefox by using ‘transform-style: preserve-3d’ on each parallax section. No idea why FF needs that

** Original Post

Has anyone used any good parallax techniques?

As written here, I’d like to avoid using background-position: fixed, and I’d prefer not to use JS (but will if there are no other options).

The three CSS versions I’ve seen that look like they have potential are:

  • The one referred to above: by Keith Clark. The problem with this one is that I can’t fully get my head around it.

  • The same applies to ScottKellum’s implementation

  • The one I’ve got working on my site and understand is by Joshua Bermenderfer, but it annoyingly doesn’t work in Firefox at all. I feel like it might be an issue of the perspective being flattened, which I think can be fixed by using transform-style: preserve-3d; but I can’t get it to work

The explanations of these effects are generally pretty poor imo, so if anyone has a useful guide on this it would be appreciated: it’s for a friend/my portfolio and it’s something he really wants, otherwise i’d have ditched it days ago!



Ugh, I managed to get Josh’s version working in Firefox by adding ‘transform-style: preserve-3d’ on to the parallax wrapper and the parallax section, but it has completely messed up how all the divs stack :frowning: