From 3ec0dde7717ee9594986cf2e9b659947ec1ee382 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Tue, 26 May 2026 08:00:03 +0200
Subject: [PATCH] =?UTF-8?q?characters=20:=20animer=20le=20width=20du=20svg?=
 =?UTF-8?q?=20de=20304px=20=C3=A0=20150px=20au=20scroll,=20ajouter=20viewB?=
 =?UTF-8?q?ox=20pour=20permettre=20le=20resize?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 assets/css/src/_header.scss             | 1 +
 assets/images/characters/characters.svg | 2 +-
 assets/js/script.js                     | 9 +++++++++
 site/snippets/header.php                | 2 +-
 4 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss
index e7f897e..b7fea59 100644
--- a/assets/css/src/_header.scss
+++ b/assets/css/src/_header.scss
@@ -22,6 +22,7 @@
 
   .characters {
     margin-top: var(--offset);
+    scale: var(--scale);
     svg {
       margin-top: -2.5rem;
       #left-character-background,
diff --git a/assets/images/characters/characters.svg b/assets/images/characters/characters.svg
index d69123f..b86748e 100644
--- a/assets/images/characters/characters.svg
+++ b/assets/images/characters/characters.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="304px" height="259px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
+<svg width="304px" height="304px" viewBox="0 0 304 259" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-miterlimit:10;">
     <g transform="matrix(1,0,0,1,19.906396,19.909726)">
         <g id="right-character">
             <g id="right-character-background" transform="matrix(1,0,0,1,-0.12,0)">
diff --git a/assets/js/script.js b/assets/js/script.js
index 40a7b83..bea887f 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -4,6 +4,8 @@ document.addEventListener("DOMContentLoaded", () => {
 
   const CHAR_SPEED = 0.6;
   const LOGO_SPEED = 1.2;
+  const CHAR_WIDTH_MAX = 304;
+  const CHAR_WIDTH_MIN = 150;
 
   // Valeurs initiales lues depuis l'attribut style HTML
   const charMax = parseFloat(
@@ -16,6 +18,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
     // Characters : descend de charMax à 0 au fil du scroll
     moveCharacters(scrollY);
+    scaleCharacters(scrollY);
     moveLogo(scrollY);
   }
 
@@ -24,6 +27,12 @@ document.addEventListener("DOMContentLoaded", () => {
     charactersWrapper.style.setProperty("--offset", charOffset + "rem");
   }
 
+  function scaleCharacters(scrollY) {
+    const charOffset = Math.max(0, charMax - (scrollY / 16) * CHAR_SPEED);
+    const charWidth = CHAR_WIDTH_MIN + (charOffset / charMax) * (CHAR_WIDTH_MAX - CHAR_WIDTH_MIN);
+    charactersWrapper.querySelector("svg").setAttribute("width", charWidth + "px");
+  }
+
   function moveLogo(scrollY) {
     const logoOffset = Math.min(scrollY * LOGO_SPEED, logoMax);
     logo.style.setProperty("--logo-offset", `-${logoOffset}px`);
diff --git a/site/snippets/header.php b/site/snippets/header.php
index e99bd0c..6c575f2 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -12,7 +12,7 @@
       Lesort<br>
       Hecq
     </h1>
-    <div class="characters" style="--offset: 9.5rem">
+    <div class="characters" style="--offset: 9.5rem; --scale: 1">
       <?= svg('assets/images/characters/characters.svg') ?>
     </div>
   </header>