Invert/change logo on scroll - html

Question

An article over on askthecssguy.com shows how to change/invert an image on scroll using fixed backgrounds: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/
My goal takes this concept further by having the image float over other elements (in this case images).
You can see the result here: http://playground.iamkeir.com/invert-logo/v2/
However, my implementation uses superfluous elements and, so, I was wondering if anyone had any ideas/suggestions of another way to achieve this?
Javascript is certainly an option but I worry it would not be lean/elegant. Someone also suggested using Canvas.
Any ideas welcomed! Thank you.

Answer 1

You can avoid extra markup by using :after CSS pseudo element. Thus, your final markup will look like:
<ul>
<li class="light">
<img src="http://farm3.static.flickr.com/2802/4253151258_7d12da9e1c_z.jpg" />
</li>
<li class="dark">
<img src="http://farm1.static.flickr.com/31/66005536_d1c5afca29_z.jpg?zz=1" />
</li>
<li class="light">
<img src="http://farm4.static.flickr.com/3574/3646151231_0c68f4f974_z.jpg" />
</li>
<li class="dark">
<img src="http://farm4.static.flickr.com/3432/3310214210_813d13c899_z.jpg" />
</li>
</ul>
And the altered CSS will be:
.dark:after,
.light:after,
.dark .after,
.light .after {
position: absolute;
display: block;
content: '';
top: 0; left: 0;
height: 100%;
width: 76px;
background: transparent url(logo-white.png) no-repeat fixed 0 0;
z-index: 5;
}
.dark:after,
.dark .after {
background-image: url(logo-black.png);
}
Notice that there is .after class there. This is to make it work in IE<8, which, sadly, requires to use an expression:
.dark,
.light {
behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );
}
While using expressions is generally discouraged, this one shouldn't affect the performance too much, since it is fully evaluated only once, and when the element is created, the condition returns false.
There is one pitfall, though. If IE8 works in IE8/IE8 mode, the pseudo-elements will be under the images, unless you set negative z-index for the latter, which isn't always acceptable.
You can look at working example here.

Answer 2

what you're trying to do is totally possible using the current code you just need to use absolute positioning to move the content around. For example using the test page http://askthecssguy.com/examples/fixedBackgroundImages/example01.html you can modify the .header class and make it like this.
.header {
background: url("images/cuckoo_color.jpg") no-repeat fixed 20px 20px #DBDED1;
left: -151px;
padding: 40px 40px 40px 300px;
position: absolute;
}
Doing this will make the text float over the images. Going a step further instead of using a background image you could insert a transparent PNG into it's own DIV and float it over any position on the page and keep it's position fixed. You can checkout http://www.w3schools.com/css/css_positioning.asp for some examples.
Hope that helps!
Virgil