diff options
Diffstat (limited to 'src/pages/index.astro')
| -rw-r--r-- | src/pages/index.astro | 23 |
1 files changed, 19 insertions, 4 deletions
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 « rythmiques » possibles. </p> @@ -64,6 +64,21 @@ import VideoAuto from "../component/VideoAuto.astro"; enregistrés. Contactez-moi pour en parler ! </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> |