Инвертируйте / изменить логотип на прокрутки

Статья на askTheCsssguy.com показывает, как изменить / инвертировать изображение на прокрутке, используя фиксированные фоны: http://asktheecssguy.com / Статьи / Mike-asss-the-css-guy-about-a-прокрутка - с фоновыми изображениями /

Моя цель требует этой концепции в дальнейшем, имея изображение плавать над другими элементами (в этом случае изображения) Отказ

Вы можете увидеть результат здесь: http://playground.iamkeir.com/invert-logo/v2/

Однако моя реализация использует лишние элементы и, поэтому мне было интересно, если у кого-нибудь Идеи / предложения по другому способу добиться этого?

JavaScript, безусловно, является вариантом, но я волнуюсь, это не будет Lean / Elegant. Кто-то также предложил использовать холст.

Любые идеи приветствовали! Спасибо.