Ce que c’est
Le site d’un transporteur, complet : un hero plein écran, quatre services sur un rail, un cadre qui grandit jusqu’au plein écran au défilement, une étude de cas, un bandeau de logos, un témoignage chiffré, un globe et ses quatorze pays, six cartes d’actualité, une FAQ, un appel final, un pied de page. Une page, un fichier HTML.
Le design reprend celui d’un template Webflow commercial, dont rien de visuel n’a été gardé : les quinze photographies ont été régénérées pour ce template, et ses trois vidéos de fond sont devenues des images fixes au même cadrage. Tout le code a été réécrit : l’original, c’était 383 Ko de CSS minifié, jQuery, quatre bundles Webflow, un moteur d’animation propriétaire, GSAP et trois de ses greffons, et une scène 3D diffusée en WebAssembly depuis un autre domaine. Illisible, donc inutile pour apprendre.
C’est tout l’objet : 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 — quatre lignes
Tout en haut de assets/css/style.css :
--paper: #eaecef; /* fond de page, sections claires */
--paper-lift: #d7dade; /* sections claires surélevées */
--ink: #14161a; /* le texte, et les sections sombres */
--ink-lift: #23262c; /* surfaces sombres surélevées */
Une chose à saisir avant de toucher au reste : ce design n’a aucune couleur d’accent. Quatre neutres, et rien d’autre — l’original en déclare une et ne s’en sert jamais sur la page. La seule couleur du template est celle du focus clavier, et elle existe en deux nuances parce qu’elle doit tenir sur les deux fonds : #2f6df0 sur le clair (4,9 : 1) et #7aa5ff sur le sombre (7,4 : 1). En changer une oblige à revérifier l’autre.
Le nom
Cherche « Portmark » dans index.html. Aucun nom de classe ne porte la marque, et le logotype est un mot posé dans la police du template plutôt qu’une image : un rechercher-remplacer ne peut rien casser.
Les tailles
L’échelle typographique est déclarée une seule fois, en haut, en clamp(). Un titre n’a jamais sa propre media query : tu changes --h2-size et toute la page suit. Les seules règles sous @media sont des règles de mise en page.
Les quatorze effets, et comment ils sont faits
Tous relevés dans les données des deux moteurs d’animation de l’original — 113 événements Webflow sur cette page, 42 distincts après déduplication, plus 26 déclencheurs de défilement GSAP portant 68 animations. Lus dans les stores, puis mesurés dans le navigateur, pas à l’œil.
| Effet | Où | Comment |
|---|---|---|
| Titres qui montent ligne par ligne | 12 titres | le JS les découpe en lignes après le chargement de la police, chaque ligne sort de son propre masque |
| Apparition au défilement | 20 blocs | IntersectionObserver, déclenché à 15 % du bas de l’écran |
| Texte qui se remplit | le pitch des services | les mots s’allument l’un après l’autre au fil du défilement, sans bibliothèque |
| Cadre qui grandit | entre services et clients | le JS écrit une variable de progression, le CSS en fait une largeur, une hauteur et un rayon |
| Parallaxe du hero | accueil | la photo dérive à 18 % du défilement, mise à l’échelle pour ne jamais découvrir un bord |
| Barre qui bascule clair / sombre | 7 sections | la barre fixe lit le thème de la section qui passe sous elle |
| Photo d’actualité au survol | 6 cartes | apparaît en 200 ms pendant qu’elle revient d’un zoom de 5 %, comme dans l’original |
| Zoom de la photo de service | 4 cartes | scale: 1.04 en 750 ms |
| Boutons | partout | un fond monte depuis le bord bas, le libellé s’inverse avec lui |
| Soulignement qui balaie | lien d’étude de cas | translateX de −100 % à 0 |
| La date laisse place à « Read article » | 6 cartes | deux cellules superposées dans une même case de grille, glissant de 110 % |
| Bandeaux défilants | logos et pied de page | deux rangées identiques et des keyframes CSS — sans JS, et ils s’arrêtent au survol |
| Méga-menu | navigation | un <details> : s’ouvre au clic sans script, plus 90 ms à l’ouverture et 260 ms à la fermeture au pointeur |
| Carrousels | services et actualités | scroll-snap natif : glisser, balayer et le clavier fonctionnent sans JS |
Ce qu’il faut savoir
- Aucune requête externe. 22 requêtes au chargement, toutes locales. L’original tirait jQuery, quatre bundles, GSAP et un moteur 3D WebAssembly depuis quatre domaines.
-
L’apparition au défilement ne peut pas masquer le contenu.
L’état caché n’existe qu’une fois le JavaScript exécuté. Vérifié en retirant les
<script>: 12 titres sur 12 restent visibles, les six questions s’ouvrent toujours, le cadre qui grandit est à sa taille finale. L’original, lui, masque deux douzaines de sélecteurs envisibility: hiddentant que son moteur n’a pas démarré. -
Zéro style en ligne, zéro script en ligne. Vérifié en servant le dossier avec la politique stricte de
_headers, pas supposé. - Le seuil d’apparition est à 15 % du bas de l’écran, et non au premier pixel comme dans l’original : le bloc entre visiblement au lieu d’avoir fini avant qu’on le voie.
-
Le texte courant est lisible. L’original dimensionne tout en
vwsur une planche de 1 800 px, sans plancher : son corps de texte tombe à 12,8 px à 1 440 et à 8,8 px à 991. Ici l’échelle reste proportionnelle mais chaque valeur est bornée — les grands titres sont identiques au dixième de pixel, seuls les petits textes sont relevés. - Accessibilité : lien d’évitement, état du menu annoncé, FAQ native, position du carrousel annoncée, focus visible en deux nuances, décorations masquées aux lecteurs d’écran, animations coupées si le système le demande — délais compris.
- Responsive vérifié à 390, 1 440 et 2 560 px, au chargement comme après défilement complet, sans aucun débordement horizontal.
Ce qui n’est pas parfait
Mieux vaut le dire ici que te le laisser découvrir.
- Le globe est une image fixe. L’original diffuse une Terre 3D photoréaliste, soit environ 2 Mo de WebAssembly depuis un autre domaine. C’est une dépendance que ce template ne prend pas : c’est donc une image avec une dérive lente et un halo qui respire. Même dessin, même cadrage — le volume et l’interaction ont disparu. C’est l’écart le plus visible de toute la page.
- Les trois vidéos de fond sont devenues des images fixes au même cadrage. Une vidéo tirée d’un export n’est presque jamais redistribuable, et ces trois-là pesaient 9,5 Mo rien qu’en MP4 — pour un template qui tient aujourd’hui sous les deux. Le cadre grandit toujours au défilement ; seul le mouvement à l’intérieur a disparu.
- La photo des cartes d’actualité n’apparaît qu’au survol, comme dans l’original. Il n’y a pas de survol sur un écran tactile : sur un téléphone, cette photo ne se voit donc jamais. Elle apparaît en revanche au focus clavier, ce que l’original ne fait pas.
- Découper les titres en lignes coûte un reflow au chargement de la police et à chaque changement réel de largeur. C’est le prix de masques qui tombent au bon endroit à toutes les largeurs.
- L’accordéon exclusif demande un navigateur récent — Chrome 120, Firefox 130, Safari 17.2. Sur plus ancien il s’ouvre et se ferme toujours, mais plusieurs questions peuvent rester ouvertes en même temps.
Il t’attend dans la bibliothèque.
Portmark 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