繁体   English   中英

jQuery:滚动时平滑动画字体大小更改

[英]jQuery: smooth animate font-size change on scroll

我有一个jQuery动画功能设置,当文档滚动超过50px时,可以更改.header-wrap文本的字体大小。 这是有效的,我不是那么热衷于我已经得到的解决方案,它不是很顺利,理想情况下我希望在向下滚动页面时平滑地改变字体大小,而不是必须停止滚动 - 启动动画等等。它只是有点锯齿状。
jsFiddle演示: 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'
        });
    }
});

任何建议/更好,更顺畅的解决方案,我得到的非常欢迎,非常感谢!

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

你必须修复你的边距和定位,因为那些也会被动画化。

这是一个概念验证小提琴

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM