This is a headline. I'm making a statement.

Here is another. I've got something to prove.

This is important. So lets make a change.

How It Works

This is just a little demo of a simple CSS effect that I used recently for a presentation deck type page. It works well for that particular use because it gives the feel of deck slides and really drives home the introduction headlines or problems statements.

See the Source on Codepen

Note these headlines have to be in large full-screen type sections for them to function correctly, because they use CSS hover state to become "in view". Plus, it just looks cool. It gives the illusion of events without any javascript. Granted, the effect could be missed if the user scrolls with the keyboard or the side scroll bar. This effect was built for modern browsers for a specific purpose, so I'm assuming the user will be scrolling with a mouse or trackpad.

I found it to be simple and effective. I'm sure you can find your own use for it. It would be great with FitText.js. It also isn't limited to just a color change. Have fun with it!