feat(content): scroll animation

3 files changed, 24 insertions, 12 deletions

diff --git a/src/component/MosaicBackground.astro b/src/component/MosaicBackground.astro
index d568172..df81a25 100644
--- a/src/component/MosaicBackground.astro
+++ b/src/component/MosaicBackground.astro
@@ -13,8 +13,8 @@ const { height = "400" } = Astro.props;
       const children = e.children;
       const max = e.clientWidth;
       const height = e.getAttribute("data-height");
+      if (height == null) throw new Error(`Height is null`);
       const newChildren = [];
-      console.log(e.hasAttribute("data-height"));
 
       let line = document.createElement("div");
       let currentWidth = 0;
@@ -22,7 +22,6 @@ const { height = "400" } = Astro.props;
 
       const fn = () => {
         let current = children[i++];
-        console.log(current.getBoundingClientRect().width, current.getBoundingClientRect().height);
         let ratio = current.clientWidth / current.clientHeight;
         line.appendChild(current.cloneNode(true));
         currentWidth += ratio * height;
@@ -33,10 +32,8 @@ const { height = "400" } = Astro.props;
         while (i < children.length && currentWidth <= max) fn();
         if (i < children.length) fn();
         // setting height
-        console.log(currentWidth);
         let h = (max * height) / currentWidth;
-        console.log(`${h}px`);
-        line.style.height = `${h - 1}px`;
+        line.style.height = `${h - 0.01}px`;
         newChildren.push(line);
         if (i < children.length) {
           line = document.createElement("div");
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>
diff --git a/src/scss/style.scss b/src/scss/style.scss
index d44b054..cfa646b 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -46,7 +46,7 @@ header {
   font-size: 1.75rem;
 }
 
-article {
+section {
   min-height: 100vh;
   position: relative;
 }
@@ -56,10 +56,10 @@ article {
   display: flex;
   flex-direction: column;
   left: 50%;
-  top: 50%;
+  top: 60%;
   transform: translate(-50%, -50%);
   gap: 1rem;
-  background: black;
+  background: hsl(15, 10%, 5%);
   color: white;
   max-width: 800px;
   margin: auto;