More information about the Underscore mailing list

[_] Logo invert-on-scroll challenge

Keir Moffatt hello at iamkeir.com
Thu Sep 1 16:41:10 BST 2011

Hi all,

I've been experimenting today with a fixed logo which inverts its colours
depending on whether it is over a light or dark background/element.

It's based on using fixed backgrounds explained over here:
http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/

My goal takes this concept further by requiring that the image float over
images rather than simply being a background image for an element.

You can see it in action here:
http://playground.iamkeir.com/invert-logo/v2/

My implementation uses a superfluous <div> and wondered if anyone had any
ideas/suggestions of another way to achieve this?

I could certainly use Javascript but I'm keen to know if it can be achieved
with HTML/CSS alone. Another suggestion was the use of Canvas.

Any ideas welcomed!

Thanks,

Keir

-- 
http://iamkeir.com