アンカースクロールの調整

src/assets/styles/common.css

@@ -8,6 +8,7 @@
 
 body {
   font-family: "Noto Sans JP", sans-serif;
+  scroll-margin-top: 50px;
 }
 
 :root {

src/assets/styles/maskAnimation.css

@@ -20,16 +20,19 @@
   animation-iteration-count: infinite;
 }
 
+/* 山の画像のマスク */
 .intersectionAnimationImage1 {
   mask-image: url("/assets/images/intersection_mask1.png");
   animation-name: intersection1;
 }
 
+/* 海の画像のマスク */
 .intersectionAnimationImage2 {
   mask-image: url("/assets/images/intersection_mask2.png");
   animation-name: intersection2;
 }
 
+/* 街の画像のマスク */
 .intersectionAnimationImage3 {
   mask-image: url("/assets/images/intersection_mask1.png"),
     url("/assets/images/intersection_mask2.png");
@@ -169,12 +172,14 @@
   mask-repeat: no-repeat;
   mask-position:
     0 0,
-    324px 237px;
+    324px 237px; /* 「O」の穴に合う位置 */
+
   mask-size:
     100% 100%,
-    16px 18px;
+    16px 18px; /* 「O」の穴に合うサイズ */
+
   mask-composite: exclude;
-  transform-origin: 331px 246px;
+  transform-origin: 331px 246px; /* 拡大した時「O」の穴の中心が起点となるような位置 */
 }
 
 .text {

src/mask_animation/index.html

@@ -13,7 +13,7 @@ <h1>マスクアニメーション</h1>
       <p>マスクをアニメーションできるのがCSSでマスクするメリットです</p>
 
       <section class="animationSection">
-        <h2>交差アニメーション</h2>
+        <h2 id="intersection">交差アニメーション</h2>
         <div class="intersectionAnimation">
           <img
             src="/assets/images/bg.webp"
@@ -39,7 +39,7 @@ <h2>交差アニメーション</h2>
         </div>
       </section>
       <section class="animationSection">
-        <h2>トランジションアニメーション</h2>
+        <h2 id="transition">トランジションアニメーション</h2>
         <div class="transitionAnimation">
           <img
             src="/assets/images/bg.webp"
@@ -55,7 +55,7 @@ <h2>トランジションアニメーション</h2>
       </section>
 
       <section class="animationSection">
-        <h2>スクロールと連動したマスクアニメーション</h2>
+        <h2 id="scroll">スクロールと連動したマスクアニメーション</h2>
         <div class="scrollMask">
           <div class="scrollMaskInner">
             <div class="wall">
@@ -100,10 +100,10 @@ <h2>スクロールと連動したマスクアニメーション</h2>
       const text = document.querySelector(".text");
 
       // スクロールイベントに応じてスケールを変更
-      scrollArea.addEventListener("scroll", (e) => {
+      scrollArea.addEventListener("scroll", (event) => {
         // スクロール量に応じた拡大率
-        const scaleRatio = 1 + e.target.scrollTop / 11;
-        if (e.target.scrollTop < 0) {
+        const scaleRatio = 1 + event.target.scrollTop / 11;
+        if (event.target.scrollTop < 0) {
           return;
         }
         text.style.scale = `${scaleRatio}`;