Reading Time: < 1 minute
I’ve always wanted to use a few depth layers with the illustrations on my website, but I’ve been waiting for technology to catch up a little.
In an effort to maximise the rendering performance of browsers, I attempted to used native CSS functions – the translate function to stack layers on top of each other in the Z plane.
I got this far, but realised that content further down the page would also need to be in the Z plane parallax group, and have ground to a halt with it all. The performance is pretty terrible too, which is a bit annoying. Browsers are a little bit pathetic at what they can render, these 7 layers get fans a-turning on all the systems I’ve tested on. I will probably optimise to 4 layers of parallax max.