Adam’s such a mad scientist with CSS. He’s been putting together a series of “notebooks”<\/a> that make it easy for him to demo code. He’s got one for gradient text<\/a>, one for a comparison slider<\/a>, another for accordions<\/a>, and the list goes on.<\/p>\n\n\n\n

One of his latest is a notebook of scroll-driven animations<\/a>. They’re all impressive as heck, as you’d expect from Adam. But it’s the simplicity of the first few examples that I love most. Here I am recreating two of the effects in a CodePen, which you’ll want to view in the latest version of Chrome for support.<\/p>\n\n\n\n\n\n\n\n