How it works

The demo uses before and after elements for the drop shadow effect, since CSS text shadows are quite slow to animate. The JS snippet finds all elements with the popart class and sets the custom text-content attribute, that get's read in the css using attr(text-content);. This way, the before and after elements both have the same text as our heading. Now we just have to set the transform properties on our before and after element on mousemove and we're done!

If you like this design, why dont you check out some of my other design experiments