CODEWITHSUNDEEP
javascriptcssanimationscroll
Thomas Maier
Thomas Maier

Reputation: 301

Add animation to css change on scroll

I have built the following page:

http://jsfiddle.net/czLo0t6n/

Code visible at jsfiddle

When scrolled, the header reduces its height and text and logo change their position and size, as it is seen on many sites now. I would like to add an animation to the process of scrolling. How can I do that? I have very low knowledge of JavaScript, but actually I assumed that the animation would already be in there. But as you can see, the states jump to each other, there is no visual transition.

Or maybe you can recommend me a better script than what I used?

Hope somebody can help :-)

Best

Th

Upvotes: 0

Views: 756

Answers (1)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

You should enable transitions on the elements that change when the .large/.small classes are toggled

#header header,
#logo, 
#slogan{
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition:all 0.4s;
}

Demo at http://jsfiddle.net/czLo0t6n/2/

Upvotes: 1

Related Questions