Ce que c’est
Un site complet d’une page pour un transitaire : globe pointillé en rotation et quatorze destinations, promesse chiffrée, cour de chargement où un reach stacker dépose un conteneur, camion qui traverse l’écran, route vue du dessus, porte-conteneurs, six services, avis, partenaires, articles, FAQ et pied de page de contact.
La page est cinématographique sans devenir une boîte noire. Le globe se dessine sur un canevas 2D, la longue séquence de chargement dépend d’une seule valeur de progression, et le rail des services reste un carrousel scroll-snap natif. Aucun framework, aucun CDN, aucune étape de build : ouvre index.html, tout fonctionne localement.
Toutes les sources restent lisibles et commentées. C’est un template à étudier, renommer et transformer, pas une démo compressée qui ne marche que chez son hébergeur d’origine.
Ce que tu changes en premier
Les couleurs — sept lignes
Tout en haut de assets/css/style.css :
--ink: #111111; /* texte et panneaux sombres */
--paper: #ffffff; /* sections claires */
--surface: #f4f4f4; /* surfaces claires surélevées */
--brand: #3a00cc; /* accent sur blanc */
--brand-deep: #2a0099; /* survol sur blanc */
--brand-lift: #8a6bff; /* accent sur sombre */
--signal: #ff8a00; /* routes et broches du globe */
L’accent existe en trois valeurs parce qu’une seule couleur ne garde pas assez de contraste sur le blanc, le noir et les photographies. Change le trio ensemble ; --signal reste séparé pour que les routes ambre demeurent lisibles sur le globe bleu.
Le nom
Cherche « Trelane » dans index.html. Aucun nom de classe ne porte la marque, et le logotype est du texte plutôt qu’une image : un rechercher-remplacer ne peut pas casser la mise en page.
Les tailles
Toute l’échelle typographique vit dans le bloc de jetons, puis se rééquilibre uniquement aux ruptures principales. Change --h2 une fois et tous les titres de section suivent ; aucun titre ne porte sa media query particulière.
Les quatorze effets, et comment ils sont faits
Les durées et courbes de l’original ont été relevées, puis reconstruites avec de petites primitives du navigateur. Les scènes longues partagent un seul repère de progression : la grue, le conteneur, la route, le camion et le navire restent alignés à toutes les tailles d’écran.
| Effet | Où | Comment |
|---|---|---|
| Entrée masquée du titre | hero | chaque ligne monte sous son propre masque, avec 90 ms de décalage |
| Globe en rotation | hero | projection orthographique sur canevas, redessinée à 30 i/s sans bibliothèque 3D |
| Atmosphère et routes | hero | lumières ambre et bleue précalculées, puis routes et broches au-dessus des terres |
| Apparitions au défilement | partout | IntersectionObserver, déclenché à 15 % du bas de l’écran |
| Balayage du texte | grands titres | une propriété CSS animable déplace un dégradé découpé dans chaque ligne |
| Compteurs | introduction | une boucle requestAnimationFrame avec courbe cubique sortante |
| Ouverture d’image | introduction | clip-path et échelle partagent la courbe exponentielle d’origine |
| Chargement au reach stacker | services | machine, crochet et conteneur vivent dans le même repère mesuré |
| Traversée du camion | services | course en translate indépendante de la largeur, liée au défilement |
| Rail des services | services | scroll-snap natif, également avancé par la progression de la scène |
| Compteur de vitesse | services | dérivée lissée de la progression du camion, plafonnée à 92 km/h |
| Route et camion vus du dessus | jalons | des variables CSS développent la route et déplacent le véhicule sur le même axe |
| Porte-conteneurs | pourquoi Trelane | le navire traverse un dégradé bleu de brume marine avec la progression |
| Marquises et FAQ | en-tête, pied, FAQ | keyframes CSS pour les boucles ; <details> natifs pour les questions |
Ce qu’il faut savoir
- Aucune requête externe. Polices, images, scripts et données du globe vivent tous dans le dossier du template.
- L’apparition au défilement ne peut pas masquer le contenu. L’état caché n’existe qu’après le lancement du script d’amélioration. Sans JavaScript, les 23 titres restent visibles et les huit questions s’ouvrent toujours.
-
Zéro style en ligne, zéro script en ligne. Vérifié en servant le dossier avec la politique stricte de
_headers, pas supposé. - Les scènes longues sont mesurées. Les contrôles automatiques vérifient que le globe reste dans le cadre, que la charge touche le crochet et la pile, et que le camion comme le navire restent visibles en paysage, portrait et mobile.
- Le texte courant est lisible. Il a été relevé à 16 px au lieu de reproduire les 13,3 px de la source.
- Accessibilité : lien d’évitement, état du menu annoncé, FAQ native, rail utilisable au clavier, focus visible, scènes décoratives masquées aux lecteurs d’écran et état complet sans mouvement.
- 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 bras du reach stacker reste fixe. Le conteneur suit un arc mesuré du crochet à la pile, mais le bras hydraulique ne s’articule pas image par image.
- Le globe est un canevas 2D plutôt qu’une scène WebGL. Il tourne, éclaire son limbe et garde chaque route alignée, mais ne simule ni atmosphère volumétrique ni soleil physique.
- L’océan est un dégradé. Le navire traverse une brume bleue, sans simulation de fluide ni sillage généré derrière lui.
- Les roues ne tournent pas séparément. Chaque camion est une seule image transparente ; la traversée reste lisible sans multiplier les calques.
- La page est volontairement longue. Les scènes épinglées échangent de la distance de défilement contre un mouvement lisible ; le mode sans animation les replie sur leur état final.
Télécharge-le. Ouvre-le. Fais-le tien.
Trelane se télécharge gratuitement, avec le code source complet et toutes ses ressources locales.
Code complet · Sans compte · Sans framework