studio-variable/hecq-et-lesort
5
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

header : scale au scroll plutôt que width/height (1.3 → 0.8)

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-06-23 15:53:45 +02:00
parent 7e327a3a1f
commit ccc5d79c7e
3 changed files with 10 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

8
assets/css/src/_header.scss
View file

@ -26,11 +26,9 @@
display: flex; display: flex;
align-items: center; align-items: center;
} }
li.characters svg { li.characters {
width: var(--char-size); scale: var(--char-scale);
height: var(--char-size); transition: scale 0.1s linear;
overflow: visible;
transition: width 0.1s linear, height 0.1s linear;
} }
} }
.top { .top {

12
assets/js/characters/resizeOnScroll.js
View file

@ -1,16 +1,16 @@
const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre l'échelle minimale
const CHAR_SIZE_MIN = 60; // taille minimale en px const CHAR_SCALE_MIN = 0.8;
export function initCharactersResizeOnScroll() { export function initCharactersResizeOnScroll() {
const charactersItem = document.querySelector(".main-header nav .characters"); const charactersItem = document.querySelector(".main-header nav .characters");
if (!charactersItem) return; if (!charactersItem) return;
// Taille maximale lue depuis le style inline — seule source de vérité // Échelle initiale (max) lue depuis le style inline — seule source de vérité
const charSizeMax = parseFloat(charactersItem.style.getPropertyValue("--char-size")); const charScaleMax = parseFloat(charactersItem.style.getPropertyValue("--char-scale"));
window.addEventListener("scroll", () => { window.addEventListener("scroll", () => {
const ratio = Math.min(1, window.scrollY / SCROLL_THRESHOLD); const ratio = Math.min(1, window.scrollY / SCROLL_THRESHOLD);
const charSize = charSizeMax - ratio * (charSizeMax - CHAR_SIZE_MIN); const charScale = charScaleMax - ratio * (charScaleMax - CHAR_SCALE_MIN);
charactersItem.style.setProperty("--char-size", charSize + "px"); charactersItem.style.setProperty("--char-scale", charScale);
}); });
} }

2
site/snippets/header.php
View file

@ -15,7 +15,7 @@
<li> <li>
<a href="<?= page('spectacles')->url() ?>"><?= page('spectacles')->title() ?></a> <a href="<?= page('spectacles')->url() ?>"><?= page('spectacles')->title() ?></a>
</li> </li>
<li class="characters" style="--char-size: 150px"> <li class="characters" style="--char-scale: 1.3">
<a href="<?= $site->url() ?>"> <a href="<?= $site->url() ?>">
<?= svg('assets/images/characters/characters-no-outfit.svg') ?> <?= svg('assets/images/characters/characters-no-outfit.svg') ?>
</a> </a>