Your browser may have trouble rendering this page. See supported browsers for more information.

|<<>>|55 of 273 Show listMobile Mode

A nice CSS demo that uses 350% CPU

Published by marco on

The article Getting the Mouse Position using CSS by Bramus talks about a neat trick that uses sibling elements to react to mouse events without using JavaScript. It also features some kick-ass translucency and animation effects with CSS transitions.

As you move the cursor around, the layer of “cells” change X and Y positions that the CSS text elements “watch”. This lets the central elements “follow” the mouse, transforming a stack of “CSS” texts in a nicely composed and layered stack. It looks like this.

While this is a nice-looking effect—and it’s impressive that it works purely in the browser and purely in CSS—it kicked in the fan on my iMac, something that rarely happens.

That said, the compositing features of a modern browser are impressive and can save website authors a lot of time and effort. That this is even possible is already really, really nice. Maybe with a bit of tweaking, it can be made less detrimental to battery life.

If you want to try it out yourself or tweak the code, check out the CodePen.