By combining the power of `rem` and a small JavaScript function to manipulate the `font-size` of the `html` element, we can achieve simple but effective parallaxing.
Setting all our positions and parallax movements in CSS, this technique minimises DOM manipulations to just one – on the `html` element – boosting overall performance.
The speed and direction of each element is set using margins (for this demo I've used `margin-top`). Play around with the numbers yourself to get a better understanding.
This is just a proof of concept and hasn't been fully tested, though it should work everywhere that supports `rem` (see here). Using `rem` in this way does have its pitfalls – most notably the loss of its traditional usage – but it's a nice trick.