要素が画面の特定の位置に入ったらアニメーションを開始する、ということがしたいです

Question

JavascriptのgetBoundingClientRectを初めて使ったのですが、ページをリロードした時点で対象のものがどこにあるかっていうものですよね。
これをライブアップデートで値を返してくれるようにするにはどうしたらいいですか？

例えば

const target = document.querySelector(".target").getBoundingClientRect().y;
const target1 = document.querySelector(".target1");
console.log(target);

if (target < 300) {
target1.style.color = '#f00';
}

上記console.log(target);の値はページをリロードしないと値が変化しないですよね。これをスクロールするごとに更新される方法が知りたいです。
もしそれができれば、targetが３００以下になった瞬間色を変える、ということができると思うのですが、、

Answer 1

funciton functionName(){
}
window.addEventListener('scroll', functionName);

こうしないとスクロールした時に値がアップデートされないんですね。

Answer 2

こちらのサイトのもので応用できそうですかね????
【JavaScript】スクロールに応じて文字の色を変える方法
デモサイト

Comments

[lem000]

ありがとうございます！！