From e5c92241cf23546e8fdccd92050c02516f0abd9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?William=20Herg=C3=A8s?= <william@herges.fr>
Date: Sat, 9 Aug 2025 17:06:06 +0200
Subject: feat(content): scroll animation

---
 src/pages/index.astro | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 99e3537..39e338f 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -29,12 +29,12 @@ import VideoAuto from "../component/VideoAuto.astro";
     </header>
   </body>
   <main>
-    <article class="batteur">
+    <section class="batteur">
       <MosaicBackground height="500">
         <img src="/batteur/old2.jpg" />
         <img src="/batteur/old3.jpg" />
-        <img src="/batteur/dark_scene.jpg" />
         <VideoAuto src="/batteur/video/bb.webm" />
+        <img src="/batteur/dark_scene.jpg" />
         <img src="/batteur/mid_rock.jpg" />
         <img src="/batteur/black_and_white.jpg" />
         <img src="/batteur/old.jpg" />
@@ -50,7 +50,7 @@ import VideoAuto from "../component/VideoAuto.astro";
           <h3>Studio & Live</h3>
         </div>
         <p>
-          A tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans
+          À tous les âges, sur tous les kits et avec toutes les coupes de cheveux, cela fait 40 ans
           que la batterie m’accompagne et qu’elle me suit pour agrémenter vos concerts et vos
           séances des meilleures «&thinsp;rythmiques&thinsp;» possibles.
         </p>
@@ -64,6 +64,21 @@ import VideoAuto from "../component/VideoAuto.astro";
           enregistrés. Contactez-moi pour en parler&thinsp;!
         </p>
       </div>
-    </article>
+    </section>
   </main>
 </html>
+
+<script is:inline defer>
+  const sections = document.querySelectorAll("section");
+  document.addEventListener("scroll", () => {
+    sections.forEach((section) => {
+      const rect = section.getBoundingClientRect();
+      if (rect.top > window.scrollY || rect.bottom * 2 < window.scrollY) return;
+      const content = section.querySelector(".content");
+      if (content == null || !(content instanceof HTMLElement))
+        throw new Error(`Invalid section ${section}`);
+      const ratio = (window.scrollY - rect.top) / (rect.bottom - rect.top);
+      content.style.top = `${65 - ratio * 20}%`;
+    });
+  });
+</script>
-- 
cgit v1.2.3