HTML text color change on scroll

Question

I know the title is misleading but I had no better way of adding a title to my question:

I've stumbled upon a couple of sites now, using HTML 5 and CSS 3.0 in a horizontal parallax-type single page layout, with a title over an image, let's say, black on a white background image, and when you scroll to the right, the black text gradually become lighter to accommodate the new background coming into view, let's say white text on black background.

This seems to be a growing trend, specifically in Windows Store Application and I'm trying to replicate something similar for a web site.

What I have so far is using jQuery to hard-code possible coordinates for the text and when the scroll position reaches about 25% of the position to the right start changing the color using SVG, but this seems over complicated.

Are there any examples online? I've tried search for HTML / CSS text fade-in fade-out but this does not really return anything concrete?

[This might help](http://stackoverflow.com/q/4512481/901048). — Blazemonger, Feb 12 '13 at 18:59
This is a good [parallax tutorial](http://www.html5rocks.com/en/tutorials/speed/parallax/) in the great and usefull Html5rocks website. including different approaches to this problem. — alonisser, Feb 12 '13 at 19:05

score 1 · Answer 1 · answered Feb 12 '13 at 18:59

You might consider reading Fancy Scrolling Sites on CSS-Tricks.

In the last year or so, there's been enough sites that do fancy things when you scroll down that it's kind of a trend. I thought I'd blog it, you know, for the sake of history.

Here's how you could watch for scrolls and do stuff with jQuery:

$(window).scroll(function(eventObject) {
    // do stuff! You can find out about how far
    // the window has scrolled via the eventObject.
});

Using the scroll position, you can change the colour, do whatever you can do with the jQuery. :)

HTML text color change on scroll

1 Answers1