< Web-Narratif >

Projet : Narration et animation en HTML / CSS

Le web comme médium narratif et espace de mouvement

Introduction

Le web n’est pas seulement un outil technique destiné à afficher de l’information.
C’est un médium narratif à part entière, avec ses propres logiques, contraintes et possibilités.

Contrairement au cinéma traditionnel :

  • Le web est non linéaire par nature (hyperliens, navigation, choix).
  • Le spectateur peut devenir acteur de son parcours.
  • Le temps peut être déclenché par l’interaction (clic, scroll, hover).
  • L’espace n’est pas fixe : il peut être exploré.

De la même manière, l’animation sur le web ne repose pas sur une timeline classique comme dans les logiciels de montage ou d’animation.
En HTML/CSS :

  • Le mouvement est déclaratif.
  • Les animations sont définies par des règles.
  • Le code devient un outil chorégraphique.
  • Le timing est pensé différemment.

Ce projet vous invite à explorer le web non pas comme un simple support, mais comme un terrain d’expérimentation narrative et animée.

Projet

Créer une œuvre narrative interactive animée en HTML/CSS

Vous devez concevoir une mini-fiction interactive utilisant uniquement :

  • HTML
  • CSS
  • JavaScript (si besoin)

Votre projet devra explorer :

  • La narration non linéaire (hyperliens, embranchements, navigation)
  • L’animation en CSS pur
  • La relation entre interaction et récit

Contraintes obligatoires

1. Structure narrative

  • Minimum 5 pages / sections narratives
  • Au moins 2 embranchements possibles
  • Le spectateur doit pouvoir faire un choix influençant son parcours

2. Animation

  • Utilisation obligatoire de :
  • @keyframes
  • transform ou transition
  • Minimum 3 animations distinctes
  • Les animations doivent avoir un rôle narratif (pas seulement décoratif)

3. Contraintes techniques

  • Pas d’images animées (GIF interdits)
  • Les images fixes sont autorisées

Axes de réflexion

Vous êtes invités à réfléchir aux questions suivantes :

  • Comment le choix modifie-t-il le récit ?
  • Comment le rythme peut-il être influencé par l’interaction ?
  • L’animation est-elle illustrative, symbolique, ou structurelle ?
  • Le spectateur est-il passif ou actif ?
  • Peut-on parler de montage lorsque l’on parle de navigation ?

Pistes possibles (non obligatoires)

  • Récit à embranchements
  • Poème interactif
  • Rêve fragmenté
  • Mapping/Espace mental exploré par le scroll
  • Histoire dont certaines parties disparaissent selon les choix
  • Animation typographique narrative
  • Fiction minimaliste abstraite

Livrables

À rendre :

  1. Un dossier contenant :
  2. index.html
  3. style.css
  4. (éventuellement d’autres fichiers HTML)
  5. Une courte note d’intention (PDF ou texte) expliquant :
  6. Votre concept narratif
  7. Votre approche de l’animation
  8. Vos références éventuelles
  9. Les choix techniques assumés

Objectifs pédagogiques

À travers ce projet, vous devrez :

  • Comprendre le web comme espace narratif
  • Explorer le code comme outil de création
  • Penser l’animation sans timeline visuelle
  • Travailler la contrainte comme moteur artistique
  • Expérimenter une forme de narration non linéaire

Durée

À préciser selon le calendrier (exemple : 8 à 10 semaines).

Exemple de structure -> ici