CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
user1374796
user1374796

Reputation: 1582

jQuery: smooth animate font-size change on scroll

I have a jQuery animation function set-up to change the font size of the .header-wrap text when the document scrolls beyond 50px. This works, I'm not so keen on the solution I've got though, it's not very smooth, ideally I'd like the font-size to change smoothly as you scroll down the page, instead of having to stop scrolling the re-initiate the animation etc. It's just a bit jagged.
jsFiddle demo: http://jsfiddle.net/cXxDW/
HTML:

<div class="content-wrap"></div>
<div class="header-wrap">hello
    <br/>hello
    <br/>hello
    <br/>
</div>

jQuery:

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".header-wrap").stop().animate({
            fontSize: '17px'
        });
    } else {
        $(".header-wrap").stop().animate({
            fontSize: '25px'
        });
    }
});

Any suggestions / better, smoother solutions to the one I've got are more than welcome and greatly appreciated!

Upvotes: 2

Views: 13785

Answers (1)

Per Salbark
Per Salbark

Reputation: 3645

You wont get a very smooth animation of fontSize. But if you only need compatibility with modern browsers you could animate zoom instead.

You would have to fix your margins and positioning since those will be animated as well.

Here is a proof-of-concept fiddle.

Upvotes: 3

Related Questions