EXPÉRIENCE IMMERSIVE · GUIDE PDF · 15,90 €
Site web immersif : une histoire animée, un contenu toujours lisible
Construire l’ouverture animée et le défilement d’un site web immersif, avec une expérience complète quand le média ne joue pas.
- Niveau
- Intermédiaire
- Format
- Guide PDF de 41 pages
- Contenu
- 4 modules et un atelier guidé
- Pratique
- 5 exercices corrigés, 3 modèles à copier
- Mise à jour
- Octobre 2026, 30 sources vérifiées
- Apprentissage
- En autonomie, à votre rythme
L’extrait gratuit de 6 pages présente le sommaire et le début du premier module. Le guide complet et ses exercices sont réservés à l’achat.
LA RÉPONSE EN BREF
Que se passe-t-il quand la vidéo ne joue pas ?
La page doit rester complète : le guide impose une base statique, un poster, le respect de prefers-reduced-motion et des tests de scroll et de panne média.
CE QUE VOUS ALLEZ CONSTRUIRE
Un programme
pour passer à l’action.
Créer une page de démonstration avec un film court, des chapitres et une version statique complète.
- Choisir le rôle du média avant l’effet.
- Préparer une vidéo et son poster.
- Contrôler scroll, mouvement réduit et panne média.
1. Donner un rôle à l’immersion
Faire comprendre une offre grâce au mouvement.
2. Préparer les actifs et les droits
Obtenir un média cohérent avant l’intégration.
3. Intégrer avec une base statique
Préserver la lecture et les actions dans tous les états.
4. Tester le temps et le défilement
Vérifier l’expérience complète au lieu d’une capture.
Atelier guidé : le bandeau complet de Dorlane
Le projet fil rouge mené de bout en bout : étapes, données d’essai, résultats attendus, exercice final et corrigé détaillé.
À qui s’adresse ce guide ?
Créateurs déjà à l’aise avec HTML et CSS qui veulent enrichir une vitrine.
Avant de commencer
Une page sémantique fonctionnelle, un média autorisé et un navigateur de test.
Cette page sémantique de départ se construit avec le guide pour créer un site web.
Ce que contient le guide
- 4 modules : objectif, exemples chiffrés, erreurs fréquentes, exercice et corrigé commenté
- Un atelier guidé mené de bout en bout
- Un plan d’action sur 7 jours
- 3 modèles et prompts prêts à copier, une liste de contrôle et une grille de décision
- 7 questions fréquentes et un glossaire de 16 termes
- 30 sources officielles, vérifiées en octobre 2026
Ce qui n’est pas inclus
Pas d’accompagnement individuel, de vidéos, de certification ni d’abonnement aux outils cités. Ce guide propose une méthode et des ateliers à adapter à votre projet.
Si vous cherchez des vidéos, un accompagnement individuel ou une certification, ce guide ne convient pas ; les sources officielles citées sous la leçon permettent d’aller plus loin.
Prix du guide
Prix : 15,90 € — TVA non applicable, achat unique.
LEÇON EN ACCÈS LIBRE
Donner un rôle à l’immersion
Existe-t-il un extrait gratuit ? Oui : le début du premier module est lisible ci-dessous, tel qu’il figure dans le guide, et un extrait PDF de 6 pages est téléchargeable.
Objectif
Vous saurez écrire en trois moments ce que le mouvement fait comprendre, puis choisir la technique la moins coûteuse qui suffit à le montrer.
Une page qui n’explique pas l’assemblage
Cas fil rouge
L’Atelier Dorlane veut « un site immersif »
La page de la Sillage 38 contient six photographies, un texte et « Réserver un exemplaire ». Les visiteurs demandent comment la montre est assemblée. Un film de six secondes doit montrer cet assemblage.
Un site est dit immersif quand le mouvement ou le défilement fait partie de la façon dont il raconte. Ce n’est jamais un but : un effet vaut ce qu’il fait comprendre. Avant de choisir une technique, demandez-vous : que doit mieux percevoir le visiteur ? Pourquoi une photo ne suffit-elle pas ? Quelle action suit ?
Écrire le récit en trois moments
Un récit de mouvement tient en trois moments : un début, une action, une fin. Pour chacun, écrivez une seule phrase utile, celle que le visiteur doit pouvoir répéter après avoir vu le film, puis ce que montre l’image. La fin du film est aussi votre image de repli : elle deviendra le poster, c’est-à-dire l’image fixe affichée quand le film ne joue pas.
| Moment | Ce que montre l’image | Phrase utile |
|---|---|---|
| Début, 0 à 2 s | Les pièces du mouvement, séparées, sur fond sombre | « Cette montre commence par des pièces. » |
| Action, 2 à 4,5 s | Les pièces rejoignent la platine, dans l’ordre de pose | « Chaque pièce est posée à la main. » |
| Fin, 4,5 à 6 s | Le balancier se met à battre, la montre est complète | « Elle vit : vous pouvez la réserver. » |
Erreur fréquente
Une succession de poses n’est pas une action
Symptôme : le film montre la montre sous trois angles, puis un zoom lent. Les visiteurs le regardent sans rien apprendre.
Cause : chaque plan montre le même état de l’objet. Une succession de poses ou un zoom décoratif ne montre pas l’action d’un sujet.
Correction : écrivez les trois moments avec un verbe qui change l’état de l’objet (séparer, assembler, faire battre) et supprimez tout plan qui ne correspond à aucun verbe.
Choisir la technique la moins coûteuse
Le mouvement s’obtient de cinq façons, qui n’ont ni le même poids ni la même maintenance. Un film pré-rendu offre une direction visuelle stable : vous décidez de chaque image. Une scène 3D calculée en temps réel permet une exploration libre, mais elle exige un modèle, un appareil assez puissant et quelqu’un pour la maintenir. Choisissez selon la tâche du visiteur et selon vos moyens de maintenance.
| Besoin | Technique de départ | Coût à surveiller |
|---|---|---|
| Montrer une action une fois, à l’arrivée | Film <video> joué une fois, avec poster | Poids du fichier, refus de lecture automatique |
| Lier l’image au défilement | Film piloté par le défilement | Recherche d’image, comportement selon l’appareil |
| Lier l’image au défilement, avec un contrôle total | Suite d’images dessinées dans un canvas | Nombre de fichiers, mémoire |
| Animer des blocs de la page au défilement | Animations CSS pilotées par le défilement | Disponibilité à vérifier navigateur par navigateur |
| Laisser le visiteur tourner autour d’un objet | Scène 3D en temps réel (WebGL) | Matériel de l’appareil, maintenance |
Repère vérifié
Selon MDN — WebGL et MDN — animations pilotées par le défilement, consultées le 4 octobre 2026 : WebGL est une API JavaScript qui affiche des graphismes 2D et 3D interactifs sans extension, et son support existe dans les navigateurs modernes, mais l’appareil doit aussi disposer du matériel adapté. Les animations pilotées par le défilement font avancer des valeurs le long d’une chronologie de défilement plutôt que du temps ; vérifiez leur disponibilité navigateur par navigateur dans les tableaux de compatibilité de MDN avant de vous y appuyer.
À vous de jouer
Votre scénario en trois moments
Choisissez votre offre ou la Sillage 38. Écrivez le tableau des trois moments (ce que montre l’image, une phrase utile de quinze mots au plus par moment), puis la phrase qui amène à l’action. Ajoutez une ligne : « Ce qu’une photo ne montre pas ».
Critère de réussite : une personne qui ne lit que vos trois phrases comprend l’offre et sait quelle action suit ; chaque moment change l’état de l’objet.
La suite dans le guide complet
Le corrigé commenté de cet exercice, la fin de ce module et les 3 modules suivants, l’atelier guidé, le plan d’action sur 7 jours et les 3 modèles à copier.
15,90 € TVA non applicable · achat uniqueTarif du guide
Guide PDF à télécharger après paiement. Paiement unique, sans abonnement.
Une question sur ce guide ?
Pour approfondir
POURSUIVRE VOTRE PROJET
