jQuery:滚动时平滑动画字体大小变化

jQuery: smooth animate font-size change on scroll

本文关键字：字体 变化 动画 平滑 滚动 jQuery      更新时间：2023-09-26

我有一个jQuery动画函数设置，当文档滚动超过50px时，可以更改.header-wrap文本的字体大小。这有效，但我不太热衷于我拥有的解决方案，它不是很流畅，理想情况下，我希望字体大小在您向下滚动页面时平滑变化，而不必停止滚动重新启动动画等。只是有点参差不齐。
js小提琴演示：http://jsfiddle.net/cXxDW/
.HTML：

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

j查询：

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

任何建议/更好，更流畅的解决方案都非常受欢迎，非常感谢！

你不会得到一个非常流畅的fontSize动画。但是，如果您只需要与现代浏览器兼容，则可以改为zoom动画。

您必须固定边距和位置，因为它们也将是动画的。

这是一个概念验证小提琴。

相关文章：