Michael/SBC
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Corrige le fondu du carrousel de logos (coupait les cartes net)

Browse Source 
Le fondu en CSS mask-image ne s'affichait pas correctement : les cartes
en bord de carrousel étaient tronquées net au lieu de s'estomper.
Remplacé par un vrai dégradé en overlay (deux calques blanc→transparent
superposés aux bords), plus fiable visuellement, avec une largeur de
fondu réduite sur mobile.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Fkg15RCxNgUys4ru73He2o
This commit is contained in:
Claude committed 2026-07-14 06:53:20 +00:00
1 parent 2023820896
commit 9cfd4e4e93
2 files changed
+10 -5
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

web/src/pages/Home.jsx
+2
View File
@@ -187,6 +187,8 @@ export default function Home() {
</div> </div>
<div className="container"> <div className="container">
<div className="marquee-mask"> <div className="marquee-mask">
<div className="marquee-fade marquee-fade-left" />
<div className="marquee-fade marquee-fade-right" />
<div className="marquee-track"> <div className="marquee-track">
{marquee.map((m, i) => ( {marquee.map((m, i) => (
<div key={`${m.id}-${i}`} style={{ width: 210, flexShrink: 0, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '22px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}> <div key={`${m.id}-${i}`} style={{ width: 210, flexShrink: 0, background: 'var(--bg)', border: '1px solid var(--border)', borderRadius: 4, padding: '22px 20px', display: 'flex', flexDirection: 'column', gap: 14 }}>
web/src/styles.css
+8 -5
View File
@@ -33,11 +33,14 @@ input:focus, textarea:focus, select:focus { outline: none; border-color: var(--r
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 46s linear infinite; padding: 0 10px; } .marquee-track { display: flex; gap: 20px; width: max-content; animation: marquee 46s linear infinite; padding: 0 10px; }
.marquee-track:hover { animation-play-state: paused; } .marquee-track:hover { animation-play-state: paused; }
.marquee-mask { .marquee-mask { position: relative; overflow: hidden; }
position: relative; .marquee-fade {
overflow: hidden; position: absolute; top: 0; bottom: 0; width: 110px; z-index: 2; pointer-events: none;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); .marquee-fade-left { left: 0; background: linear-gradient(90deg, var(--marquee-bg, #fff), transparent); }
.marquee-fade-right { right: 0; background: linear-gradient(270deg, var(--marquee-bg, #fff), transparent); }
@media (max-width: 640px) {
.marquee-fade { width: 40px; }
} }
.container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } .container { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }