Le rêve de J

J se trouve dans un monde de rêve fait de papier et de vecteur. Il commence ce voyage. Il interagit avec la vie de ce monde mystérieux, aimable et terrifiant.

Projet scrollytelling créé dans le cadre du cours Optimisation Web - Intégration multimédia - Collège Montmorency. @ 2024 - Conception : Victor Gileau | Développement Web : Victor Gileau

scrollTrigger
- trigger= #chapitre1
- toggleActions: 'play pause reverse pause'
- Personnage sprite : deplacement de x(0) à x(-80vw)
- OnStart :
- Text : passer d'un text à l'autre
- Sol 1 : de x(0) à x(-20vw)
- Roche 2 et 3 : de x(5vw) à x(-10vw)
- Roche 1 : de x(5vw) à x(-14vw)
scrollTrigger
- trigger= #chapitre1
- background-position : x(-10vw)
- pin

♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦♦♦♦♦♦¿♦♦ ♦♦♦♦♦♦♦♦♦

Cerle : scale(1) à scale(1.4) répétition + yoyo
scrollTrigger
- trigger= #chapitre2
- toggleActions: 'play pause reverse pause'
- Personnage sprite : deplacement de x(0) à x(30vmin)
- OnStart :
- OnComplete :
- Text : passer d'un text à l'autre
- Sol 1 : de x(0) à x(-20vw)
- Tout les roches : de x(0) à x(-10vw)
- Crapeau et cerle : de x(0) à x(-8vmin)
- Chapitre2 : de opacity(1) à opacity(0)
scrollTrigger
- trigger= #chapitre2
- background-position : x(-10vw)
- pin

♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦♦♦♦♦♦¿♦♦ ♦♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦♦♦♦♦♦

Personnage sprite : rotation(360) répétition
Papiers : rotation(360) répétition et yoyo
scrollTrigger
- trigger= #chapitre3
- Text : passer d'un text à l'autre et 'fixed' au chapitre3
- OnEnter :
- OnLeave :
- OnLeaveBack :
- OnEnterBack :
- Papier cinq, Papier six et personnage sprite : y(0) à y(400vh)
- Formes brisées : y(0) à y(50vh) avec stagger(each(2))
- Papier un : Motion Path
- Papier deux : Motion Path
- Papier troix : Motion Path
- Papier quatre : Motion Path
- Deux lignes blanches : DrawSVG (100% à 100%)
- Chapitre3 : oapcité(1) à opacité(0)
scrollTrigger
- trigger= #chapitre3
- pin

Je tombe. Je tombe. Je tombe. Et je tombe encore.

scrollTrigger
- trigger= #chapitre4
- toggleActions: 'play pause reverse pause'
- OnEnter
- Personnage sprite : x(-70vw) à x(70vw)
- OnStart :
- OnComplete :
- Text : passer d'un text à l'autre
- Sol 1 et Sol 2 : x(0) à x(-50vw)
- Tout les roches : x(0) à x(-10vw)
- Chapitre4 : opacité(1) à opacité(0)
scrollTrigger
- trigger= #chapitre4
- background-position : x(-10vw)
- pin

♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦♦♦♦♦♦¿♦♦ ♦♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦♦♦♦♦ ♦♦¿♦♦♦♦♦♦♦♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦

Animation Chapitre 5 : Étoiles, Boulles et Effects : y(0) opacité(0.3) à y(10vh) opacité(1) répétition et yoyo
Animation Chapitre 5 : Effects : scale(1) à scale(1.5) répétition et yoyo
scrollTrigger
- trigger= chapitre5
- Chapitre5 : opacité(0) à opacité(1)
- Personnage sprite : x(0) à x(50vw)
- OnStart :
- OnComplete :
- Text : passer d'un text à l'autre
- Sol 1 et Sol 2 : x(0) à x(-20vw)
- Tout les roches : x(0) à x(-10vw) stagger(each(0.5))
scrollTrigger
- trigger= #chapitre5
- pin

♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦ ♦♦♦♦♦¿♦♦♦♦♦♦♦♦♦♦♦¿♦♦ ♦♦♦♦♦♦♦♦♦♦♦♦¿♦♦♦♦♦♦♦♦ ♦♦¿♦♦♦♦♦♦♦♦♦♦♦

Animation Chapitre 6 : Étoiles, Boulles et Effects : y(0) opacité(0.3) à y(10vh) opacité(1) répétition et yoyo
Animation Chapitre 6 : Effects : scale(1) à scale(1.5) répétition et yoyo
scrollTrigger
- trigger= chapitre6
- Text : passer d'un text à l'autre
- SVG trefle = lune : morpSVG, shapeIndex: 6
scrollTrigger
- trigger= #chapitre6
- pin

Cerle : (opacité(0.6) et scale(0.6)) à (opacité(1) et scale(1)) répétition + yoyo
scrollTrigger
- trigger= chapitre7
- pas de scrub
- marker : start(blanc) end(mauve)
- Text : passer d'un text à l'autre + ajout de class + changement de couleur du text

...erocne ever te eveR