- 12 photos régénéréesAucune image du site repris ne subsiste. Douze photographies produites pour ce template, libres de droit.
- 17 animations relevéesExtraites du moteur du site d’origine, pas devinées à l’œil : durées, courbes, décalages, seuils.
- 0 requête externeAucune dépendance, aucun CDN, aucune étape de build. On ouvre le fichier et ça marche.
Ce que c’est
Le site d’un club de padel qui prend ses réservations en ligne : bandeau d’annonce, accueil pleine hauteur, présentation avec compteurs, trois services, quatre étapes, un appel à l’action pleine page, cinq entraîneurs, huit questions, pied de page avec inscription à la lettre d’information. Une page, un fichier HTML.
Le design suit celui d’un template commercial dont rien n’a été conservé : ni les photos, ni le code. L’original tenait en 91 Ko de CSS minifié, jQuery, trois bundles Webflow de 2,4 Mo, GSAP avec ScrollTrigger et SplitText, et un moteur d’animation propriétaire. Illisible, donc inutile pour apprendre.
C’est tout l’enjeu : ce template n’est pas là pour être admiré, il est là pour être lu, cassé et refait.
Ce que tu changes en premier
Les couleurs — trois lignes
Tout en haut de assets/css/style.css :
--accent: #3bf0c8; /* boutons, indicateurs, chiffres */
--accent-deep: #16c9a2; /* le même, assombri pour le survol */
--accent-soft: #8ff8df; /* le même, éclairci pour le texte sur photo */Une chose à comprendre avant de toucher au reste : il y a trois aquas, pas un. L’accent plein porte 14,5:1 sur le noir, mais il disparaît dans une photo claire — d’où la version éclaircie. Si tu changes l’un, change les trois. Et l’accent est clair par construction : il porte du texte noir, jamais du blanc.
Le nom
Cherche « Volea » dans index.html : sept occurrences. Aucun nom de classe ne porte la marque, un rechercher-remplacer ne peut rien casser.
Les tailles
L’échelle typographique est déclarée une fois, puis redéclarée à chaque point de rupture. Un titre n’a donc jamais de media query à lui : tu changes --t-h2 et toute la page suit.
Les 16 effets, et comment ils sont faits
Tous relevés dans les données du moteur d’animation de l’original — le site tourne sous Webflow IX3, qui écrit ses 17 interactions et ses 17 timelines en clair dans le bundle de page. Extraits par script, puis mesurés dans le navigateur, jamais à l’œil.
| Effet | Où | Comment |
|---|---|---|
| Titre qui s’écrit | accueil | découpé en mots, 0,03 s de décalage — des mots et non des lettres, un lecteur d’écran lit encore une phrase |
| Photo qui dérive | accueil, appel à l’action | le JS écrit une variable de progression, le CSS applique la translation |
| Parallaxe | 7 photos | même mécanisme, ±10 % dans un cadre agrandi de 20 % |
| Cadre qui se déroule | 2 photos | clip-path plutôt qu’une hauteur : rien ne se remet en page |
| Apparition en cascade | services, étapes, entraîneurs, FAQ | IntersectionObserver, déclenché à 15 % du bas de l’écran |
| Paragraphe qui s’allume | présentation | le JS écrit la progression, le CSS calcule l’opacité de chaque mot en clamp() |
| Barre qui se fige | navigation | une classe, une transition — l’original scrubait cette valeur sur le défilement |
| Compteurs | présentation | 0 → 10K et 0 → 500, arrondis au pas pour ne pas clignoter |
| Liens qui roulent | menu, pied de page | deux copies du libellé dans une fenêtre d’une ligne |
| Flèches des boutons | partout | la première s’envole, la seconde entre par en bas à gauche |
| Accordéons | 8 questions | <details> natif, hauteur animée par une piste de grille |
| Menu qui tombe | ≤ 991 px | panneau translaté, hamburger qui se plie en croix |
Ce qu’il faut savoir
- Aucune requête externe. Toutes les ressources sont locales, polices comprises. L’original chargeait jQuery, trois bundles et Google Fonts depuis trois domaines.
- Les apparitions ne peuvent pas masquer le contenu. L’état caché n’existe qu’une fois le JavaScript exécuté. Vérifié en retirant les
<script>: 22 titres sur 22 restent visibles, les 2 cadres sont déroulés, les 8 accordéons s’ouvrent. - Zéro style en ligne, zéro script en ligne. Le template respecte la politique de sécurité stricte du site — celle-là même que l’original enfreignait avec un
<style>masquant quatorze sélecteurs. - Le seuil d’apparition est à 15 % du bas de l’écran, et mesuré sur l’écran, jamais sur l’élément : un seuil en pourcentage de l’élément laisse invisible à jamais tout bloc plus haut que l’écran.
- Accessibilité : lien d’évitement, état du menu annoncé, FAQ native, focus visible, décorations masquées aux lecteurs d’écran, animations coupées si le système le demande — retards compris.
- Vérifié à 390, 1440 et 2560 px, au chargement comme après défilement complet, sans débordement horizontal. Le banc est livré :
node _mesures/banc.mjs.
Ce qui n’est pas parfait
Mieux vaut le dire ici que te le laisser découvrir.
- Le formulaire d’inscription n’envoie rien. Il répond dans la page plutôt que de naviguer vers une adresse qui n’existe pas. L’endroit où brancher ton
fetch()est signalé dansmain.js. - « Sign in » et « Book a Court » pointent vers le pied de page. L’original renvoyait vers l’éditeur ; un template d’une page n’a pas d’autre destination honnête qu’une ancre.
- Le décalage de la cascade a été divisé par trois (0,3 s → 0,1 s). À la valeur d’origine, la cinquième carte des entraîneurs finissait trois secondes après la première : on avait fini de défiler avant qu’elle arrive.
- Le pied de page fait 10,7 % de plus que l’original à 479 px : l’adresse et le numéro y tiennent sur deux lignes en capitales. Sur la page entière l’écart tombe à −0,1 %.
- Le club, les entraîneurs et les chiffres sont inventés. C’est écrit dans le pied de page de la démo.
Il t’attend dans la bibliothèque.
Volea est inclus dans l’abonnement, avec le reste de la bibliothèque et la formation complète.
Accès immédiat · Sans engagement · Résiliable en un clic