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

header : resize SVG réel via viewBox + --char-size sur width

Browse source 
Ajout de viewBox="0 0 191 163" sur le SVG pour que width CSS
redimensionne vraiment le dessin. Passage de scale/--char-scale
à width/--char-size (191px → 80px min sur 250px de scroll).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-06-23 15:59:11 +02:00
parent ccc5d79c7e
commit 5f7891882e
4 changed files with 12 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

2
assets/images/characters/characters-no-outfit.svg
View file

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?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"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="191px" height="163px" 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="191px" height="163px" viewBox="0 0 191 163" 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,-379.932397,-101.861172)"> <g transform="matrix(1,0,0,1,-379.932397,-101.861172)">
<path d="M518.5,164.85C518.5,164.85 516.34,171.67 520.73,174.87C524.88,177.89 525.79,180.19 525.44,182.28C524.73,186.48 519.58,186.98 517.69,187.02" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/> <path d="M518.5,164.85C518.5,164.85 516.34,171.67 520.73,174.87C524.88,177.89 525.79,180.19 525.44,182.28C524.73,186.48 519.58,186.98 517.69,187.02" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>
<path d="M499.12,197.5C495.07,188.8 506.71,190.56 510.84,182.28" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/> <path d="M499.12,197.5C495.07,188.8 506.71,190.56 510.84,182.28" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:2.76px;"/>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 9.4 KiB

Before After
Before After

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

@ -1,16 +1,16 @@
const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre l'échelle minimale const SCROLL_THRESHOLD = 250; // px de scroll pour atteindre la taille minimale
const CHAR_SCALE_MIN = 0.8; const CHAR_SIZE_MIN = 80; // taille minimale en px
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;
// Échelle initiale (max) lue depuis le style inline — seule source de vérité // Taille initiale (max) lue depuis le style inline — seule source de vérité
const charScaleMax = parseFloat(charactersItem.style.getPropertyValue("--char-scale")); const charSizeMax = parseFloat(charactersItem.style.getPropertyValue("--char-size"));
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 charScale = charScaleMax - ratio * (charScaleMax - CHAR_SCALE_MIN); const charSize = charSizeMax - ratio * (charSizeMax - CHAR_SIZE_MIN);
charactersItem.style.setProperty("--char-scale", charScale); charactersItem.style.setProperty("--char-size", charSize + "px");
}); });
} }

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-scale: 1.3"> <li class="characters" style="--char-size: 191px">
<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>