Ce que c’est
Le site vitrine d’une marque de cold brew, complet : un héros avec une canette et un verre, une bande de presse, une intro à trois tirages inclinés, une gamme de six produits, un carrousel d’avis posé sur une photo, un argumentaire, une histoire de marque, une bande de photos qui défile, un pied de page. Une page, un fichier HTML.
Le design suit celui d’un template commercial dont rien de visuel n’a été conservé : les 23 photographies ont été régénérées pour ce template et les 26 icônes redessinées en SVG dans la page. Tout le code a été réécrit : l’original, c’était 193 Ko de CSS minifié, jQuery, quatre bundles Webflow pesant 1,6 Mo, GSAP avec ScrollTrigger, SplitText et CustomEase, et un panier e-commerce qui appelle une API inexistante dès qu’on sort de l’outil. Illisible, donc inutilisable pour apprendre.
C’est tout l’intérêt : 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 — huit lignes
Tout en haut de assets/css/style.css :
--cream: #fbf7e4; /* fond de page */
--brown: #4a2b1e; /* texte, boutons, sections sombres */
--brown-deep: #351d13; /* le même brun, un cran plus foncé (survol) */
--brown-soft: #7a5646; /* le même brun, éclairci pour un texte secondaire */
--card: #f5eddf; /* fond des cartes produit */
--star: #eda12a; /* étoiles et badge « Verified » */Une chose à comprendre avant de toucher au reste : il y a trois bruns, pas un. Le brun plein passe le contraste sur le crème à 11,8:1, le foncé sert au survol, l’éclairci à un texte secondaire. En changer un oblige à revérifier les deux autres — un accent qui passe sur un fond uni peut disparaître dans une photo.
Le nom
Cherche « Ardova » dans index.html. Aucun nom de classe CSS 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 — 991, 767 et 479 px. Un titre n’a donc jamais sa propre media query : tu changes --h2 et tous les h2 de la page suivent.
Les treize effets, et comment ils sont faits
L’original n’utilise pas le moteur d’animation de Webflow mais GSAP, piloté par quatre scripts en clair dans la page. Les réglages ci-dessous en sortent directement — durées, courbes, décalages, seuils —, complétés par ce qui ne s’y trouvait pas et qu’il a fallu mesurer dans le navigateur : la vitesse des deux bandes défilantes. 32 éléments portent une animation d’apparition dans l’export d’origine.
| Effet | Où | Comment |
|---|---|---|
| Mots qui montent | 10 titres | découpés en <span> par le JS, chaque mot 80 ms après le précédent, back.out(2) |
| Apparition au scroll | 14 blocs | IntersectionObserver, déclenché à 15 % du bas de l’écran |
| Apparition en grossissant | les grains de café | scale 0,6 → 1 au chargement |
| Montée rapide | image du héros | 60 px en 300 ms, 700 ms après le reste |
| Trois tirages qui rebondissent | intro | scale 0 → 1, 200 ms d’écart, dépassement à l’arrivée |
| Canettes qui flottent | 6 cartes produit | 41 px de montée et retour, 2 s, en boucle — sur l’enveloppe, pour que l’inclinaison reste libre |
| Canette qui se redresse | survol d’une carte | 7° → 0° en 350 ms sur l’image intérieure |
| Bouton en trois temps | 8 boutons | le rond avant disparaît, la pilule glisse à gauche en s’inclinant, un second rond sort à droite — trois transitions, trois retards |
| Saut d’un tirage | 3 photos | 34 px de montée, retour à 18, arrivée à 22 — le rebond de l’original, en keyframes |
| Logos de presse | 4 cases | trois logos, un arrêt sur chacun, 6,3 s de cycle (mesuré) |
| Bande de photos | bas de page | 39,8 px/s (mesuré), deux panneaux identiques, boucle invisible |
| Carrousel d’avis | 6 avis | scroll-snap natif : le glisser, le balayage et le clavier marchent sans JS |
| Menu déroulant | en-tête | aria-expanded, se ferme à Échap et au clic extérieur |
Ce qu’il faut savoir
- Aucune requête externe. Vérifié à trois largeurs : toutes les requêtes sont locales. L’original chargeait jQuery, quatre bundles et GSAP depuis trois domaines.
- L’apparition au scroll ne peut pas masquer le contenu. L’état caché n’existe qu’une fois le JavaScript exécuté. Vérifié en coupant les scripts : 13 titres sur 13 restent visibles, 0 bloc caché, et le menu est ouvert. L’original, lui, posait son état initial en JavaScript, avec un repli au cas où GSAP n’arriverait jamais.
- Zéro style en ligne, zéro script en ligne. Servi sous la politique de sécurité stricte du site, sans une violation. Même l’inclinaison des tirages et la position de chaque grain sont des classes.
- Le seuil est à 15 % du bas de l’écran, et il est mesuré sur l’écran, pas sur l’élément : un seuil donné en fraction de l’élément laisserait invisible à jamais tout bloc plus haut que la fenêtre.
-
Accessibilité : lien d’évitement, état du menu annoncé, position du carrousel annoncée dans un
role="status", décorations masquées aux lecteurs d’écran, focus visible, animations coupées — délais compris — si le système le demande. - Responsive vérifié à 390, 1440 et 2560 px, au chargement comme après avoir déroulé toute la page, sans débordement horizontal.
Ce qui n’est pas parfait
Autant le dire ici plutôt que te laisser le découvrir.
- La police des titres n’est pas celle de l’original. Celle-ci est livrée en « All rights reserved » : elle ne peut pas être redistribuée. Barlow Condensed a été retenue par mesure — à taille égale sa ligne est 7,9 % plus large, contre −8,8 % à +22,6 % pour les cinq autres condensées testées. Certains blocs de titre sont donc un peu plus larges ici : à nombre de lignes égal, il leur faut 8 % de place en plus.
- La vidéo de fond est devenue une image fixe. 1,42 Mo de MP4 et 1,53 Mo de WebM pour de la poussière de café décorative ; l’image régénérée fait le même effet pour environ un vingtième du poids. Le bouton pause qui l’accompagnait n’a plus lieu d’être.
- La page est 2,0 % plus courte que la référence à 1440 px, 1,3 % à 479 px. Section par section l’écart va de 0 % à −3,5 % sur grand écran ; sur petit écran deux sections réorganisent leurs blocs autrement et s’éloignent davantage, le pied de page à −17 %. Rien ne se chevauche.
- L’image « main et canette » recouvre son propre titre. Sur l’original elle était détourée et le titre transparaissait au travers ; une photographie générée arrive avec son fond. Le titre est donc passé au-dessus d’elle.
- Le panier e-commerce a été retiré. Hors de son outil d’origine, il appelait une API inexistante. L’icône et son compteur à zéro sont là pour le dessin et pointent vers la gamme.
- L’original a huit pages, ce template n’en a qu’une. Les liens du menu et du pied de page ont été ramenés à de vraies ancres, et les entrées sans équivalent sont remplacées par une colonne de contact.
Il t’attend dans la bibliothèque.
Ardova est inclus dans l’abonnement, avec le reste de la bibliothèque et la formation complète.
Accès immédiat · Sans engagement · Annulation en 1 clic