2

我在一个站点中使用 ScrollMagic，当我尝试以 em 而不是像素为字体大小设置动画时遇到问题。

所以，这是ems的一个例子：http : //jsfiddle.net/41h1nfxo/7/

这是另一个带有px的：http : //jsfiddle.net/jtdm0o6q/2/

如您所见，第二个效果很好。

不知道是什么原因造成的，希望大家帮帮我！谢谢

HTML

<div id="thediv">
<span>Awesome</span>

脚本

var controller;
$(document).ready(function($) {
    controller = new ScrollMagic();    
var tween = TweenMax.to("#thediv", 1, {height:100,fontSize:"100px"});
var scene = new ScrollScene({triggerElement: "#thediv", duration: 200})
                    .setTween(tween)
                    .addTo(controller);
scene.addIndicators({zindex:100});
    });
4

1 回答 1

1

问题的原因不在 ScrollMagic 中。
由于某种原因，TweenMax 无法获得 的起始值9em。

您可以看到，当您只运行补间而不将其添加到 ScrollMagic：http: //jsfiddle.net/41h1nfxo/9/

解决此问题的一种方法是将 Tween 变成 Tween fromTo：http: //jsfiddle.net/41h1nfxo/10/

现在，如果您使测试窗口非常窄，以使文本比视口宽，您仍然可以在滚动时观察到跳跃行为（仅当您拖动滚动条手柄时）。
原因是在文本变得小于视口宽度的那一刻，水平滚动条被移除。这会触发视口的大小调整，从而重新计算相对于滚动条的滚动距离。
突然间，您当前拖动手柄的位置转换为 DOM 中更靠下的位置。这就是为什么只有在向下滚动时才会发生这种情况。在这里观察这种现象：http: //jsfiddle.net/41h1nfxo/11/

要解决此问题，您可以将其添加到 css 中：

body {
    overflow-x: hidden;
}

现在一切都按预期工作：http: //jsfiddle.net/41h1nfxo/12/

对于未来的 ScrollMagic 问题，我建议您遵循本指南：https
://github.com/janpaepke/ScrollMagic/blob/master/CONTRIBUTING.md 特别是第 2.2 点会为您指明正确的方向。

至于为什么 GSAP 可能对 em 中的字体大小有问题，我只能猜测。
我建议你在他们的论坛上发布这个问题。

希望这可以帮助。Ĵ

于 2014-09-05T16:13:59.280 回答