CSS Transition on scrolling

[nikosolihin]

Hello,

I’m interested in creating similar effect to this:

http://doyouimpress.com/

As you scroll to specific section elements are faded-in. But, once that section has been viewed, it will stay opaque until the page is refreshed.

Any tips?

[nikosolihin]

Thanks for the quick reply.

The section that I meant was the one that contains 3 columns with circle images towards the bottom of the page. Right before you reach that point the CSS transition triggers.

My question is how do you delay the CSS transition of an element until that element enters the viewport?

[Kuzyo]

I think with js/jQuery fadeIn, but every element has it’s own speed http://api.jquery.com/fadeIn/

similar to http://codepen.io/Kuzyo/pen/oylGt

[nikosolihin]

Right, but how do I delay that animation until user scrolls down to where that section is? For the section that’s on top of the page by default it will animate right away but not sections that are below the viewport.

[Kuzyo]

here http://codepen.io/Kuzyo/pen/pcIhx

you have to find out window scroll with jQuery its easy **$(document).scrollTop()**

and top of boxex **$(element).effset().top**

[nikosolihin]

Dude thank you! That’s what I was looking for! :)

[Author]

Posts