feat: passe expérience — motion system niveau Awwwards (DOM/SVG, zéro WebGL)
- IntroLoader : cérémonie d'entrée (flag-bar, monogramme, titrage), 1re visite, skippable - Lenis au layout (ticker GSAP, imports dynamiques) + ancres interceptées - Hero : titrage oversized en masques, filets drapeau en parallaxe, sortie scrubée (scroll-driven CSS) - Reveal syncopé gwoka (use:reveal) sur 83 éléments, flag chips, icônes pop - Marquee kréyòl (tagline + valeurs), pause au survol - Hover craft : boutons à balayage or, nav soulignée + section active, pochettes DJANGOKAM en wipe clip-path + tilt 3D (use:tilt) avec reflet or - Gate unique prefers-reduced-motion partout ; contenu complet sans JS - Lighthouse mobile 91/100/100/100 — JS initial 69 Ko gzip (budget 170 Ko)
This commit is contained in:
sucupira
@@ -6,9 +6,19 @@
|
||||
</script>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-bg" aria-hidden="true">
|
||||
<div class="hero-watermark"></div>
|
||||
<div class="hero-stripes s1"></div>
|
||||
<div class="hero-stripes s2"></div>
|
||||
</div>
|
||||
<div class="hero-content container">
|
||||
<h1>ORGANISATION KA</h1>
|
||||
<h2 class="hero-subtitle">INTERNATIONALE</h2>
|
||||
<h1 class="hero-title">
|
||||
<span class="mask"><span class="w w1">ORGANISATION</span></span>
|
||||
<span class="mask"><span class="w w2">KA</span></span>
|
||||
</h1>
|
||||
<h2 class="hero-subtitle">
|
||||
<span class="mask"><span class="w w3">INTERNATIONALE</span></span>
|
||||
</h2>
|
||||
<p class="hero-tagline">{t.site.tagline}</p>
|
||||
<div class="hero-tags">
|
||||
{#each t.hero.tags as rawTag (rawTag)}
|
||||
@@ -40,8 +50,13 @@
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
.hero-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.hero-watermark {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -5%;
|
||||
@@ -49,29 +64,110 @@
|
||||
height: 100%;
|
||||
background: url('/images/logo-512x512.png') center / contain no-repeat;
|
||||
opacity: 0.05;
|
||||
pointer-events: none;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
/* Filets drapeau en diagonale, très basse opacité (profondeur) */
|
||||
.hero-stripes {
|
||||
position: absolute;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
background: linear-gradient(
|
||||
to right,
|
||||
transparent 0 10%,
|
||||
var(--or-oki) 10% 40%,
|
||||
var(--vert-oki) 40% 65%,
|
||||
var(--rouge-oki) 65% 85%,
|
||||
transparent 85% 100%
|
||||
);
|
||||
transform: rotate(-12deg);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.hero-stripes.s1 {
|
||||
top: 22%;
|
||||
height: 3px;
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.hero-stripes.s2 {
|
||||
bottom: 18%;
|
||||
height: 2px;
|
||||
opacity: 0.07;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2.2rem, 6vw, 4rem);
|
||||
font-size: clamp(3rem, 9vw, 7rem);
|
||||
font-weight: 900;
|
||||
margin-bottom: 0.4rem;
|
||||
line-height: 1.05;
|
||||
line-height: 0.95;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1.4rem, 4vw, 2.2rem);
|
||||
font-size: clamp(1.6rem, 4.5vw, 3rem);
|
||||
font-weight: 700;
|
||||
margin-bottom: 1.25rem;
|
||||
color: var(--or-oki);
|
||||
}
|
||||
|
||||
/* Reveal masqué au chargement (pattern titrage des sites primés) :
|
||||
uniquement si JS actif et motion autorisée — sinon texte visible */
|
||||
.mask {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
.w {
|
||||
display: inline-block;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:global(html.js) .w {
|
||||
transform: translateY(110%);
|
||||
animation: word-rise var(--dur-phrase) var(--ease-ka) forwards;
|
||||
}
|
||||
|
||||
:global(html.js) .w1 {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
|
||||
:global(html.js) .w2 {
|
||||
animation-delay: 270ms;
|
||||
}
|
||||
|
||||
:global(html.js) .w3 {
|
||||
animation-delay: 510ms;
|
||||
}
|
||||
|
||||
/* Si la cérémonie d'intro joue, le titrage attend sa sortie */
|
||||
:global(html.js.intro-pending) .w1 {
|
||||
animation-delay: 1400ms;
|
||||
}
|
||||
|
||||
:global(html.js.intro-pending) .w2 {
|
||||
animation-delay: 1520ms;
|
||||
}
|
||||
|
||||
:global(html.js.intro-pending) .w3 {
|
||||
animation-delay: 1760ms;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes word-rise {
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-tagline {
|
||||
font-size: 1.4rem;
|
||||
margin-bottom: 1.5rem;
|
||||
@@ -82,7 +178,7 @@
|
||||
.hero-description {
|
||||
font-size: 1.2rem;
|
||||
margin-bottom: 2rem;
|
||||
opacity: 0.85;
|
||||
color: var(--muted);
|
||||
max-width: 680px;
|
||||
}
|
||||
|
||||
@@ -105,6 +201,61 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
/* Parallaxe et sortie scrubée : scroll-driven animations natives,
|
||||
enhancement progressif — sans support, le hero reste statique */
|
||||
@supports (animation-timeline: scroll()) {
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
.hero-watermark {
|
||||
animation: wm-drift linear both;
|
||||
animation-timeline: scroll(root);
|
||||
animation-range: 0 100vh;
|
||||
}
|
||||
|
||||
.hero-stripes.s1 {
|
||||
animation: s1-drift linear both;
|
||||
animation-timeline: scroll(root);
|
||||
animation-range: 0 100vh;
|
||||
}
|
||||
|
||||
.hero-stripes.s2 {
|
||||
animation: s2-drift linear both;
|
||||
animation-timeline: scroll(root);
|
||||
animation-range: 0 100vh;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
animation: hero-exit linear both;
|
||||
animation-timeline: scroll(root);
|
||||
animation-range: 0 75vh;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes wm-drift {
|
||||
to {
|
||||
transform: translateY(14%) scale(1.06);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes s1-drift {
|
||||
to {
|
||||
transform: rotate(-12deg) translateX(-8%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes s2-drift {
|
||||
to {
|
||||
transform: rotate(-12deg) translateX(6%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes hero-exit {
|
||||
to {
|
||||
transform: translateY(-8vh);
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.cta-buttons {
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user