CSS Transition on Scroll issues

[lschoen114]

Hi Guys,

I am having huge issues right now with a project I am building.

I am trying to create an “ease-in” effect on scroll for the navigation.

What i’d like to accomplish is similar to http://www.usatoday.com, where after 150px of scroll, a smaller logo slides in.

Here is my code: http://codepen.io/anon/pen/JxhBp (The JS isn’t working for some reason, but it’s working during my testing.)

Any way I can create a transition on scroll effect?

Thanks!

[Paulie_D]

Not really, CSS can’t detect scrolling…this would all be handled by the JS…unless you ‘hack’ it by adding/removing classes with JS.

[TheDoc]

unless you ‘hack’ it by adding/removing classes with JS.

I wouldn’t call that a hack at all. In fact, that’s exactly how I would recommend somebody do it. All of the styles (and transitions) should be in the CSS which means all the JS has to do is toggle classes, super easy!

You’re getting an error in the Codepen because you aren’t loading jQuery.

[Author]

Posts