mirror of
https://github.com/R0m1k3/PleinR.git
synced 2026-10-19 21:28:09 +02:00
Accueil: carrousel 3 cartes avec rotation en fondu toutes les 20s
Remplace le defilement continu par 3 cartes fixes et propres. Toutes les 20 s, les cartes disparaissent une a une (fondu decale) puis les 3 suivantes apparaissent une a une. Rotation equitable sur tous les adherents actifs. Respecte prefers-reduced-motion (bascule sans fondu). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
1 parent
64ab10dea1
commit
a4f03a21aa
2 files changed
+46
-48
No files matched your search
@@ -352,37 +352,3 @@ button {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* ---- Carrousel d'adhérents (défilement automatique) ---- */
|
||||
@keyframes pleinr-marquee {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
.pleinr-marquee {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
|
||||
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
|
||||
}
|
||||
.pleinr-marquee-track {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
width: max-content;
|
||||
animation-name: pleinr-marquee;
|
||||
animation-timing-function: linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
.pleinr-marquee:hover .pleinr-marquee-track {
|
||||
animation-play-state: paused;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.pleinr-marquee-track {
|
||||
animation: none;
|
||||
}
|
||||
.pleinr-marquee {
|
||||
overflow-x: auto;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user