diff --git a/assets/css/src/_header.scss b/assets/css/src/_header.scss index 66c9565..7d54285 100644 --- a/assets/css/src/_header.scss +++ b/assets/css/src/_header.scss @@ -26,11 +26,9 @@ display: flex; align-items: center; } - li.characters svg { - width: var(--char-size); - height: var(--char-size); - overflow: visible; - transition: width 0.1s linear, height 0.1s linear; + li.characters { + scale: var(--char-scale); + transition: scale 0.1s linear; } } .top { diff --git a/assets/js/characters/resizeOnScroll.js b/assets/js/characters/resizeOnScroll.js index 3879327..b98ec29 100644 --- a/assets/js/characters/resizeOnScroll.js +++ b/assets/js/characters/resizeOnScroll.js @@ -1,16 +1,16 @@ -const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale -const CHAR_SIZE_MIN = 60; // taille minimale en px +const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre l'échelle minimale +const CHAR_SCALE_MIN = 0.8; export function initCharactersResizeOnScroll() { const charactersItem = document.querySelector(".main-header nav .characters"); if (!charactersItem) return; - // Taille maximale lue depuis le style inline — seule source de vérité - const charSizeMax = parseFloat(charactersItem.style.getPropertyValue("--char-size")); + // Échelle initiale (max) lue depuis le style inline — seule source de vérité + const charScaleMax = parseFloat(charactersItem.style.getPropertyValue("--char-scale")); window.addEventListener("scroll", () => { const ratio = Math.min(1, window.scrollY / SCROLL_THRESHOLD); - const charSize = charSizeMax - ratio * (charSizeMax - CHAR_SIZE_MIN); - charactersItem.style.setProperty("--char-size", charSize + "px"); + const charScale = charScaleMax - ratio * (charScaleMax - CHAR_SCALE_MIN); + charactersItem.style.setProperty("--char-scale", charScale); }); } diff --git a/site/snippets/header.php b/site/snippets/header.php index b9b3938..6140bdb 100644 --- a/site/snippets/header.php +++ b/site/snippets/header.php @@ -15,7 +15,7 @@