Currently, I have a jQuery animation function in place to adjust the font size of the .header-wrap text when the document is scrolled beyond 50px. While this method does work, I am not completely satisfied with it as the transition is not very smooth. Ideally, I would prefer the font size to change seamlessly as the user scrolls down the page, without the need to pause scrolling and restart the animation. The current implementation feels a bit choppy.
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'
});
}
});
If there are any suggestions or alternative solutions that can provide a smoother effect than my current setup, please feel free to share them. Your input is valuable and greatly appreciated!