Cours 9.2¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

Aujourd'hui¶

• Le storyboard v2 : vos questions (remise ce soir, 23 h 59)
• Animer au défilement : scroll(), view(), animation-range, @supports, prefers-reduced-motion
• La parallaxe en calques
• Dans votre projet : du JSON aux chapitres
• Travail d'équipe : le storyboard v2 et la section 1 du cahier

1. Le storyboard v2, ce soir¶

Le storyboard v2 et la section 1 du cahier de charges (angle, identité visuelle, moment surprenant) sont à remettre ce soir, 23 h 59. Vos questions, c'est maintenant.

Le storyboard : exigences et cadres modèles

2. Animer au défilement¶

Nous avons vu ces notions pour le portfolio au cours 6.1 il y a un mois.

Aujourd'hui, vous les tapez vous-mêmes : je code une notion devant vous, vous la refaites dans votre dépôt d'exercice, puis on passe à la suivante.

1. Une barre de progression : scroll().
2. Des cartes qui apparaissent : view() et animation-range.
3. Un texte qui glisse, et le piège de overflow: hidden.
4. Les deux règles obligatoires : @supports et prefers-reduced-motion.

Animation au scroll. Vu au cours 6.1 Exercice : animer au défilement

3. La parallaxe en calques¶

Un des trois formats de média animable : une scène découpée en plans, chacun à sa vitesse.

Techniquement, c'est une animation au défilement de plus : view-timeline-name sur la scène, une animation par calque.

L'effet parallaxe : définition et exemples Exercice : la parallaxe en calques

4. Dans votre projet : du JSON aux chapitres¶

En équipe. Vous connaissez la mécanique du fetch depuis le portfolio. Cette fois, c'est votre récit : la structure commune (si ce n'est pas déjà fait), puis une personne code le chargement des chapitres pendant que l'autre remplit les siens. Chacun sur sa branche, et on fusionne par pull request.

Du JSON aux chapitres : les étapes Arborescence du dépôt

Devoirs¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

Ce soir, 23 h 59¶

• Storyboard v2, en équipe : sur une nouvelle page Figma, exporté dans documentation/storyboard-v2.pdf.
• La section 1 du cahier de charges : angle, identité visuelle, moment surprenant.

D'ici le mer. 4 nov. (cours 10.1)¶

Terminez les exercices, chacun dans son dépôt Classroom50¶

• Exercice : un conflit, s'il n'est pas terminé;
• Exercice : le monstre responsive;
• Exercice : animer au défilement;
• Exercice : la parallaxe en calques.

Et dans votre projet :¶

• Le storyboard v2 et la section 1 du cahier, pour ce soir.
• vos chapitres s'affichent depuis data.json, sur main
• préparer vos médias (éléments animables, arrière-pan des chapitres si applicable, spritesheets, SVG)

## Crédits des médias

| Média | Chapitre | Source | Auteur | Licence | Modifié? |
|---|---|---|---|---|---|
| `foret-fond.webp` | 1 | [Unsplash](lien) | Nom auteur | Licence Unsplash | Découpé 3 calques |
| `renard.svg` | 3 | Firefly | Généré par IA | : | Vectorisé, groupes nommés |