2

サイトで ScrollMagic を使用していますが、フォント サイズをピクセルではなくemでアニメーション化しようとすると問題が発生します。

したがって、これはemsの例です: http://jsfiddle.net/41h1nfxo/7/

そして、これはpxを使用した別のものです: http://jsfiddle.net/jtdm0o6q/2/

ご覧のとおり、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/

fromToこれを修正する 1 つの方法は、Tween をtweenに変えることです: 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 のフォント サイズに問題を抱えている理由については、推測するしかありません。
この問題をフォーラムに投稿することをお勧めします。

お役に立てれば。J

于 2014-09-05T16:13:59.280 に答える