青いやつの進捗日記。

べんきょうのしんちょくをかいていきます。

aosとかの、スクロールアニメーションを動かすときのInitのタイミング。

michalsnik.github.io

AOS とか、スクロールで起動するアニメーションのライブラリを使うとき、もしくは普通にスクロールでアニメーションを動かすとき。

必要なことに、各要素の位置の取得があります。

AOSを使う場合は、JSで

AOS.init();

をします。

で、このタイミングが document.addEventListener('DOMContentLoaded'だと、上手くいきません。正確に言えば、うまくいく場合もあるけど、画像とかあると厳しい。

developer.mozilla.org

それは、主に画像等の容量が大きいもののロードが済まないうちにoffsetTopの値を取るから。一部の読み込めていない画像がない場合の一番上からの高さをとってしまいます。

developer.mozilla.org

なので、window.addEventListener('load'の中でInitしてoffsetTopの値をとるようにしましょう。