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

characters : physique gravité, déclenchement au survol, refactor JS

Browse source 
- Remplace le ressort principal par une cinématique gravité constante (900 SVG/s²) pour un décollage vif et une chute naturelle
- L'animation de saut se déclenche en boucle au mouseenter et s'arrête au mouseleave (atterrissage propre en cours de vol)
- Extrait la logique d'animation dans characters.js, script.js garde uniquement le scroll
- SVG : groupe #right-character-body pour dissocier corps/tête des jambes lors de la compression
- CSS : overflow visible sur le SVG pour le débordement pendant le saut

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown 2026-05-27 18:18:39 +02:00
parent 904726951e
commit da3fd9db2f
4 changed files with 228 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -30,6 +30,7 @@
<path id="right-exterior-hair" d="M141.53,118.34C138.12,139.12 158.27,148.88 146.26,171.34" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
</g>
<g id="right-character">
<g id="right-character-body">
<g id="right-character-background" transform="matrix(1,0,0,1,-0.12,0)">
<path d="M249.93,112.67C257.02,113.3 256.91,107.59 256.61,102.85C256.12,95.14 260.71,91.79 261.31,88.25C262.61,80.54 257.62,77.55 253.38,80.39L248.44,86.77C252.75,53.53 252.3,39.3 242.17,26.37C229.79,10.57 209.7,2.2 198.36,2.2C187.01,2.2 166.92,10.57 154.55,26.37C144.931,38.648 144.04,52.099 147.665,81.887C147.858,83.468 148.063,85.095 148.28,86.77L143.58,80.39C139.34,77.55 134.35,80.54 135.65,88.25C136.25,91.79 140.84,95.14 140.35,102.85C140.05,107.59 139.94,113.3 147.03,112.67L150.12,113.56C149.66,117.67 150.16,119.74 150.65,122.32C151.92,129.09 155.79,139.79 167.27,149.93C174.38,156.21 176.05,170.49 198.93,170.49C221.81,170.49 223.48,156.22 230.59,149.93C239.3,142.23 243.62,134.22 245.76,127.84C246.22,126.48 246.96,123.91 247.17,122.97L249.93,112.67Z" style="fill:white;fill-rule:nonzero;"/>
</g>
@ -37,10 +38,6 @@
<path id="left-chick" d="M169.84,132.38C163.4,118.53 181.92,121.34 188.5,108.15" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-chick" d="M231.14,132.79C236.78,120.67 224.08,120.72 216.98,113.74" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="mouth1" serif:id="mouth" d="M198.92,132.62C199.76,132.6 200.74,132.42 201.93,132C209.46,129.4 218.69,132 218.69,132C212.56,138.24 204.63,140.14 198.97,139.83L198.85,139.83C193.19,140.14 185.26,138.23 179.13,132C179.13,132 188.36,129.4 195.89,132C197.09,132.41 198.06,132.59 198.9,132.62L198.92,132.62Z" style="fill-rule:nonzero;"/>
<path id="right-foot1" serif:id="right-foot" d="M210.93,217.6C210.93,217.6 225.79,220.44 231.13,224.24C236.47,228.04 208.82,226.26 208.82,226.26L210.94,217.6L210.93,217.6Z" style="fill-rule:nonzero;"/>
<path id="right-leg1" serif:id="right-leg" d="M209.01,216.53C221.33,194.34 209.01,173.32 209.01,173.32" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-foot1" serif:id="left-foot" d="M187.09,217.6C187.09,217.6 172.23,220.44 166.89,224.24C161.55,228.04 189.2,226.26 189.2,226.26L187.08,217.6L187.09,217.6Z" style="fill-rule:nonzero;"/>
<path id="left-leg1" serif:id="left-leg" d="M189.01,216.53C176.69,194.34 189.01,173.32 189.01,173.32" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-ear" d="M249.93,112.67C257.02,113.3 256.91,107.59 256.61,102.85C256.12,95.14 260.71,91.79 261.31,88.25C262.61,80.54 257.62,77.55 253.38,80.39" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-ear-ring" d="M255.94,107.41C259.48,109.52 260.64,114 258.53,117.42C256.42,120.84 251.84,121.91 248.31,119.8C244.77,117.69 243.61,113.21 245.72,109.79" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-ear" d="M147.03,112.67C139.94,113.3 140.05,107.59 140.35,102.85C140.84,95.14 136.25,91.79 135.65,88.25C134.35,80.54 139.34,77.55 143.58,80.39" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
@ -59,5 +56,10 @@
<path id="left-eye-top1" serif:id="left-eye-top" d="M187.36,82.47C184,79.48 179.55,75.69 173.96,75.68C169.92,75.67 165.27,77.64 160.01,83.31" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="right-eye-top1" serif:id="right-eye-top" d="M209.33,82.47C215.12,77.33 224.14,69.78 236.68,83.31" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="skull" d="M248.44,86.77C252.75,53.53 252.3,39.3 242.17,26.37C229.79,10.57 209.7,2.2 198.36,2.2C187.01,2.2 166.92,10.57 154.55,26.37C144.42,39.3 143.97,53.53 148.28,86.77" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
</g>
<path id="right-foot1" serif:id="right-foot" d="M210.93,217.6C210.93,217.6 225.79,220.44 231.13,224.24C236.47,228.04 208.82,226.26 208.82,226.26L210.94,217.6L210.93,217.6Z" style="fill-rule:nonzero;"/>
<path id="right-leg1" serif:id="right-leg" d="M209.01,216.53C221.33,194.34 209.01,173.32 209.01,173.32" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
<path id="left-foot1" serif:id="left-foot" d="M187.09,217.6C187.09,217.6 172.23,220.44 166.89,224.24C161.55,228.04 189.2,226.26 189.2,226.26L187.08,217.6L187.09,217.6Z" style="fill-rule:nonzero;"/>
<path id="left-leg1" serif:id="left-leg" d="M189.01,216.53C176.69,194.34 189.01,173.32 189.01,173.32" style="fill:none;fill-rule:nonzero;stroke:black;stroke-width:4.4px;"/>
</g>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Before After
Before After