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
@@ -1,8 +1,11 @@
|
||||
<script lang="ts">
|
||||
// {@html} sur contenu first-party (JSON i18n du dépôt), aucune donnée utilisateur.
|
||||
import FlagChip from '$lib/components/motion/FlagChip.svelte';
|
||||
import KineticText from '$lib/components/motion/KineticText.svelte';
|
||||
import ResponsiveImage from '$lib/components/ResponsiveImage.svelte';
|
||||
import type { Bundle, Locale } from '$lib/i18n';
|
||||
import { reveal } from '$lib/motion/reveal';
|
||||
import { tilt } from '$lib/motion/tilt';
|
||||
import { pictoFor } from './pictos';
|
||||
|
||||
import portrait from '$lib/assets/images/djangokam-portrait.webp?format=avif;webp&w=480;960&as=picture';
|
||||
@@ -22,6 +25,7 @@
|
||||
<section id="djangokam" class="section">
|
||||
<div class="container">
|
||||
<p class="djangokam-surtitre">{t.djangokam.surtitre}</p>
|
||||
<FlagChip />
|
||||
<h2 class="section-title">
|
||||
<KineticText as="span" text={t.djangokam.titre} /> 
|
||||
<span class="accent-text"
|
||||
@@ -30,16 +34,21 @@
|
||||
</h2>
|
||||
<p class="section-subtitle">{t.djangokam.accroche}</p>
|
||||
|
||||
<ResponsiveImage
|
||||
picture={portrait}
|
||||
alt="Portrait officiel de DJANGOKAM"
|
||||
sizes="220px"
|
||||
class="djangokam-portrait"
|
||||
/>
|
||||
<div class="djangokam-portrait-wrap" use:reveal={0}>
|
||||
<ResponsiveImage
|
||||
picture={portrait}
|
||||
alt="Portrait officiel de DJANGOKAM"
|
||||
sizes="220px"
|
||||
class="djangokam-portrait"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<blockquote class="djangokam-highlight">
|
||||
{t.djangokam.message_cle}
|
||||
</blockquote>
|
||||
<!-- Masque vertical : la citation monte depuis le bas (dur-phrase) -->
|
||||
<div class="djangokam-highlight-mask" use:reveal={1}>
|
||||
<blockquote class="djangokam-highlight">
|
||||
{t.djangokam.message_cle}
|
||||
</blockquote>
|
||||
</div>
|
||||
|
||||
<div class="djangokam-histoire-wrapper">
|
||||
<div class="djangokam-histoire">
|
||||
@@ -48,7 +57,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<figure class="djangokam-duo">
|
||||
<figure class="djangokam-duo" use:reveal={1} use:tilt>
|
||||
<a href={t.djangokam.duo.url} target="_blank" rel="external noopener noreferrer">
|
||||
<ResponsiveImage
|
||||
picture={POCHETTES[t.djangokam.duo.image]}
|
||||
@@ -61,9 +70,9 @@
|
||||
</div>
|
||||
|
||||
<div class="djangokam-facts">
|
||||
{#each t.djangokam.faits as fait (fait.chiffre)}
|
||||
<div class="djangokam-fact-card">
|
||||
<div class="djangokam-fact-icon">
|
||||
{#each t.djangokam.faits as fait, i (fait.chiffre)}
|
||||
<div class="djangokam-fact-card" use:reveal={i}>
|
||||
<div class="djangokam-fact-icon reveal-pop" use:reveal={i + 1}>
|
||||
<svg class="icon" aria-hidden="true"
|
||||
><use href="/icons.svg#{pictoFor(fait.icon)}" /></svg
|
||||
>
|
||||
@@ -76,8 +85,8 @@
|
||||
</div>
|
||||
|
||||
<div class="djangokam-clips">
|
||||
{#each t.djangokam.clips as clip (clip.titre)}
|
||||
<figure class="djangokam-clip">
|
||||
{#each t.djangokam.clips as clip, i (clip.titre)}
|
||||
<figure class="djangokam-clip" use:reveal={i} use:tilt>
|
||||
<a href={clip.url} target="_blank" rel="external noopener noreferrer">
|
||||
<ResponsiveImage
|
||||
picture={POCHETTES[clip.image]}
|
||||
@@ -147,9 +156,15 @@
|
||||
margin: 1rem auto 2rem;
|
||||
}
|
||||
|
||||
.djangokam-highlight {
|
||||
/* Wrapper-masque de la citation : reprend les marges du blockquote
|
||||
(le masque doit rogner la translation, pas laisser les marges visibles) */
|
||||
.djangokam-highlight-mask {
|
||||
max-width: 800px;
|
||||
margin: 2rem auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.djangokam-highlight {
|
||||
padding: 2rem;
|
||||
text-align: left;
|
||||
font-size: 1.1rem;
|
||||
@@ -187,9 +202,33 @@
|
||||
.djangokam-clip a {
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: transform var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
/* Reflet or discret qui pivote avec le tilt (--ry hérité de la figure) */
|
||||
.djangokam-duo a::after,
|
||||
.djangokam-clip a::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: var(--radius-md);
|
||||
background: linear-gradient(
|
||||
calc(105deg + var(--ry, 0deg) * 4),
|
||||
transparent 35%,
|
||||
color-mix(in srgb, var(--or-oki) 70%, transparent) 50%,
|
||||
transparent 65%
|
||||
);
|
||||
opacity: 0;
|
||||
transition: opacity var(--dur-tanbou) var(--ease-ka);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.djangokam-duo a:hover::after,
|
||||
.djangokam-clip a:hover::after {
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.djangokam-duo a:hover,
|
||||
.djangokam-clip a:hover {
|
||||
transform: translateY(-4px);
|
||||
@@ -304,6 +343,43 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* ── Chorégraphie d'entrée (même gate que le reveal global : html.js
|
||||
+ motion autorisée — sinon tout est visible sans transition) ── */
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
/* Pochettes : wipe clip-path (masque DOM) + tilt 3D piloté par use:tilt.
|
||||
La transformation de base du reveal est neutralisée : seul le
|
||||
clip-path révèle, la perspective reste disponible en permanence. */
|
||||
:global(html.js) .djangokam-duo,
|
||||
:global(html.js) .djangokam-clip {
|
||||
opacity: 1;
|
||||
transform: perspective(700px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
|
||||
clip-path: inset(0 100% 0 0);
|
||||
transition:
|
||||
clip-path var(--dur-mesure) var(--ease-ka) var(--d, 0ms),
|
||||
transform var(--dur-tanbou) var(--ease-ka);
|
||||
}
|
||||
|
||||
:global(html.js) .djangokam-duo:global(.in),
|
||||
:global(html.js) .djangokam-clip:global(.in) {
|
||||
clip-path: inset(0 0 0 0);
|
||||
}
|
||||
|
||||
/* Blockquote lore : le masque ne bouge pas, la citation monte */
|
||||
:global(html.js) .djangokam-highlight-mask {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
:global(html.js) .djangokam-highlight-mask .djangokam-highlight {
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--dur-phrase) var(--ease-ka) var(--d, 0ms);
|
||||
}
|
||||
|
||||
:global(html.js) .djangokam-highlight-mask:global(.in) .djangokam-highlight {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:global(.djangokam-portrait) {
|
||||
width: 160px;
|
||||
|
||||
Reference in New Issue
Block a user