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;
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 {

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 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);
});
}

2
site/snippets/header.php
View file

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