08 Breaker fenêtre — parallaxe interne
Showroom TCAgency, rangé par style : A ouverture & navigation · B vidéo au scroll · C typographie · D révélations · E rails & défilements · F preuve & conversion · G micro-interactions · H heros d'accueil · I fonds & textures · J transitions. Le bouton ▶ en bas à gauche lance la visite guidée (effet 100).
01 loader · 41 FLIP du logo · 02 nav transparente→solide · 14 barre de progression · 27 chapitrage latéral · 39 badge circulaire
Cinq de ces effets sont déjà actifs autour de toi depuis l'arrivée : le loader t'a accueilli, son logo a volé jusqu'à la nav (41), la nav se solidifie au scroll, la barre magenta progresse en haut, le chapitre s'affiche à droite.
43 scrub inline · 44 scrub épinglé annoté · 45 vitesse liée à la vélocité · 07 breaker clip-path · 08 fenêtre parallaxe · 03 hero (vu plus haut)
Sans épinglage : la lecture avance pendant que la section traverse l'écran. Monte, descend — la vidéo t'obéit. Nécessite un encodage à keyframes denses (`-g 6`), sinon ça saccade.
La vidéo joue en boucle, mais son `playbackRate` suit la vitesse de ton scroll (jauge ci-dessus) puis revient doucement à 1×. La page paraît vivante sans jamais être scrubbée.
05 mot à mot · 30 machine à écrire · 18 image dans les lettres · 22 odomètre · 24 chute de lettres · 06 marquee géant · 59 étirement vélocité · 60 surlignage · 61 néon · 62 cercle dessiné · 63 lettres aimantées · 64 décryptage · 65 vague
Chaque mot s'allume avec ton scroll — recule, ils s'éteignent. C'est toi qui pilotes la lecture.
Un marqueur surligne l’essentiel pendant que tu scrolles — l’œil sait où aller.
Le mot important se fait entourer au passage.
32 volets · 33 grille qui se range · 26 parallaxe 2.5D · 21 zoom traversant · 35 accordéon · 34 split-screen · 66 lamelles · 67 torche · 68 flou→net · 69 duotone · 70 Ken Burns · 71 diagonale
Aires de jeuxJouetsÉducatifSportHéritage
09 horizontal épinglé · 40 drag · 10 cartes empilées · 11 colonnes 2 vitesses · 28 stepper · 25 ligne SVG · 42 mur témoignages · 72 carrousel 3D · 73 cover-flow · 74 frise · 75 rangs vivants · 76 cascade · 77 onglets FLIP
Aires de jeuxJouetsSportÉducatifSombreClair
BallonHeroObjetsLe panneau de droite reste épinglé et son image change à chaque étape.
Le pattern des pages produit SaaS — Stripe, Linear.
Parfait pour « nos services en N étapes ».
Le trait se trace au fil du scroll et relie les jalons.
`stroke-dashoffset` scrubbé : un fil conducteur pour l'œil.
Il arrive en bas pile avec le dernier jalon.
Le soulignement glisse d’un onglet à l’autre, le contenu suit.
Chaque panneau arrive en fondu + glissement.
Trois lignes de JS, sensation native.
04 chiffres · 16 avant/après · 17 hover-reveal · 38 vidéo hover-play · 12 marquee logos · 78 tarifs animés · 79 FAQ fluide · 80 jauges · 81 anneau stat · 82 carte à impulsions · 83 ticker live
990 DH/mois
2490 DH/mois
4900 DH/mois
Deux à trois semaines pour une vitrine scrollytelling, selon les allers-retours.
Oui — et vos vraies photos restent la preuve. Tout est régénérable en quelques minutes.
Chaque effet a son repli : posters, colonnes, reduced-motion. Budget 4G respecté.
Le cercle se dessine (`stroke-dashoffset`) pendant que le pourcentage grimpe — satisfaction, taux de complétion, NPS.
Casablanca → partout
Personnes en train de regarder ce showroom
13 curseur+magnétiques · 36 tilt 3D · 37 traînée · 23 skew · 20 fond qui mute · 19 rideau · 15 confettis · 84 bouton goo · 85 jour/nuit · 86 ombre suiveuse · 87 icônes dessinées · 88 ripple · 89 burst · 90 curseur VOIR
Perspective + refletLa carte « qui coûte cher »
Toute la carte change de thème en 300 ms — variables CSS + une classe.
L’ombre se déplace à l’opposé du curseur — volume instantané.
46 centré + carte média · 47 split 50/50 · 48 typo derrière le sujet · 49 éditorial minimal · 50 mosaïque flottante · 54 vidéo + accroche bas-gauche (CIEC) · 55 vidéo + centré complet · 56 vidéo + panneau verre · 57 3D interactif · 58 hero scrubbé
Dix façons d'ouvrir une page d'accueil, montrées en taille réelle avec accroche et boutons. À chaque projet : en choisir UNE.
La carte vidéo dépasse du bas — le scroll l'amène en plein écran.
La disposition la plus lisible : hiérarchie claire, CTA visibles, média pleine hauteur. Le classique qui convertit.
Les vignettes flottent et suivent légèrement la souris, à des profondeurs différentes.
Des idées créatives pour nos enfants — le jeu, l'apprentissage et le sport au service de l'enfance.
Aires de jeux, équipements sportifs et matériel éducatif : de l'étude à l'installation clé en main.
Un panneau en glassmorphism garde la lisibilité parfaite quel que soit le fond — idéal quand la vidéo est très colorée.
Mesh GLB généré par IA depuis le still du diorama (image_to_3d), affiché avec model-viewer : rotation libre à la souris, auto-rotation sinon.
Le fond est une vidéo pilotée par ta molette — l'ouverture façon Apple.
51 grain animé · 52 aurora · 53 points magnétiques · 91 mesh gradient · 92 vagues topographiques · 93 particules · 94 halo souris · 95 scanlines
`feTurbulence` SVG en overlay à 16% — zéro image, zéro JS.
96 transition rideau · 97 blur-up d’image · 98 squelette scintillant · 99 révélation circulaire · 100 visite guidée ✦
Clique le bouton : un rideau balaye, le contenu change.
Le rideau ressort de l’autre côté — continuité parfaite.
Contenu chargéLe squelette scintille puis laisse place au vrai contenu.
Règle d'usage : 6 à 8 effets par site, une seule section épinglée signature. L'orbite scrubbée complète (diorama, cartes, replis) : skill site-3d.