photo credit: Giovanni 'jjjohn' Orlando via photopin cc

How to make elements visible on scroll

I recently got inspired by this article, where elements became visible (with nice and nifty animations) when the user started scrolling. Now I wanted to implement something like this in a project I’m currently working on, and a purist as I am I wanted to do this with nothing more than CSS3 transitions. The idea is actually quite simple: just toggle a class on the <body> -tag of your page, and let CSS do the rest.

Switching the class

I didn’t wanted to include a whole library for this and I also didn’t care that much about being backward compatible to older (read: Internet Explorer) browsers. So I just came up with this small and simple way of doing this:

That’s it! That’s the only piece of code that toggles the scrolled -class on my <body> -tag.

Animate it with CSS

When it comes to the animating part, we let SCSS do the magic for us. Be creative! Animate with margins, opacity, colors, you name it! Here’s a little SCSS to set you up:

This is of course very basic, but you could stretch this as far as you want. I’ve created a little demo on CodePen that shows a single example of what can be done. Just open it, scroll down and see the magic happen.

Visitors give this article an average rating of 4.3 out of 5.

How would you rate this article?

Leave a Reply