1

100vh x 100vw の 6 つの絶対配置 div を含む 100vh x 100vw の固定コンテナーがあります。

各シーンをトリガーするために、100vh の 6 つの div で相対的に配置されたダミー要素を使用します。

ウィンドウのサイズを変更すると、シーンのアニメーションが前後に移動します。それが起こらないようにする方法はありますか?

4

1 に答える 1

2

問題は、ウィンドウのサイズを変更すると、スクロール バーの位置が絶対ピクセル数に固定されたままになることです。ただし、コンテンツはビューの高さに基づいているため、ウィンドウのサイズを変更すると、ドキュメントの高さが動的に変化します。したがって、ドキュメント本体の高さのパーセンテージとしてのウィンドウのスクロール位置も変化しており、これが ScrollMagic の進行に基づいています。

簡単な数学で説明するには:

A) ウィンドウの高さが 1000px の場合、ドキュメントの高さは 6vh * 1000px = 6000px になります。ウィンドウのスクロール位置が 1200px の場合、ScrollMagic タイムライン全体の 20% に到達したことになります。

B) ブラウザーのサイズを高さ 800px に変更すると、ドキュメントの高さが 6hv * 800px = 高さ 4800px に変更されます。ただし、ウィンドウのスクロール位置は 1200px のままで、これは ScrollMagic タイムラインの 25% です。

おそらく最も簡単な解決策は、ドキュメントの高さを固定することです。

于 2015-06-25T19:41:51.680 に答える