- 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)
28 lines
1.0 KiB
JavaScript
28 lines
1.0 KiB
JavaScript
(function() {
|
|
// Marqueur JS actif : les états initiaux cachés des animations
|
|
// (reveal, loader) ne s'appliquent que si JavaScript tourne.
|
|
document.documentElement.classList.add('js');
|
|
|
|
// Cérémonie d'entrée : première visite de la session seulement,
|
|
// jamais si l'utilisateur préfère réduire les animations.
|
|
if (!sessionStorage.getItem('oki-intro') && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
|
document.documentElement.classList.add('intro-pending');
|
|
}
|
|
|
|
// Récupérer le thème stocké ou détecter le thème système
|
|
const storedTheme = localStorage.getItem('oki-theme');
|
|
const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
|
|
|
let theme = storedTheme;
|
|
|
|
// Si pas de préférence stockée, utiliser le thème système
|
|
if (!storedTheme) {
|
|
theme = systemPrefersDark ? 'dark' : 'light';
|
|
}
|
|
|
|
// Appliquer le thème immédiatement
|
|
if (theme === 'light') {
|
|
document.documentElement.classList.add('light-theme');
|
|
}
|
|
})();
|