スクロールに合わせて広がる窓を作りたいのですが…

Question

https://terada-knit.co.jp/

上のサイトのようにスクロールに合わせて円が広がって下にあるコンテンツが見えるように作成したいのですが、方法がわからないです。
どなたかわかる方がいましたら教えてください！

Answer 1

ちょう適当に・・・

<style>
body{
  background-Image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 500 500"><circle cx="250" cy="250" r="50" fill="none" stroke="lime" stroke-width="3" /></svg>');
  background-position: center;
  background-repeat:no-repeat;
  background-attachment: fixed;
height:500%;
}
</style>
<script>
window.addEventListener('scroll',()=>{
  const stl=document.body.style;
  const bgi=getComputedStyle(document.body).backgroundImage;
  const reg=/(?<=r=\\")\d+(?=\\")/;
  const top=document.body.scrollTop;
  stl.backgroundImage=bgi.replace(reg,parseInt(50+top/10));
});
</script>

Answer 2

コードを見てみましたが、Three.js を使っているようです。
この辺りが参考になるかもしれません。

Three.jsでスクロール量によってカメラの動きを変更する+慣性スクロール | Three.jsでスクロール量によってカメラの動きを変更する+慣性スクロール

慣性スクロールを諦めれば、もう少し簡単になるような気がします。Scroll Timeline のポリフィルや Intersection Observer を活用するのがいいと思います。jQuery のライブラリも探せばあると思います。

Web の仕様を眺めるシリーズ Scroll Timeline for Web Animations | Offers Tech Blog | Web の仕様を眺めるシリーズ Scroll Timeline for Web Animations | Offers Tech Blog

JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA | JSでのスクロール連動エフェクトにはIntersection Observerが便利 - ICS MEDIA