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: /
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 wele and greatly appreciated!

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/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 wele and greatly appreciated!

• javascript
• jquery
• html
• css
• animation

1 Answer 1

You wont get a very smooth animation of fontSize. But if you only need patibility 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.