# The ‘root element’ parallax technique

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, although certainly not better than using 3D transforms.

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.

View full screen