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

characters : animer le width du svg de 304px à 150px au scroll, ajouter viewBox pour permettre le resize

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-26 08:00:03 +02:00
parent 812abbcf02
commit 3ec0dde771
4 changed files with 12 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -22,6 +22,7 @@
.characters {
margin-top: var(--offset);
scale: var(--scale);
svg {
margin-top: -2.5rem;
#left-character-background,

2
assets/images/characters/characters.svg
View file

@ -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)">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After

9
assets/js/script.js
View file

@ -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`);

2
site/snippets/header.php
View file

@ -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>