Je prépare une conférence sur le biopouvoir nazi et la nutrition dans le cadre des Ateliers de l’Honnête Volupté. Comme support visuel, au lieu d’un PowerPoint, je programme un site Web avec Scrolltrigger et Leaflet. Le site fonctionne un peu comme un Prezi et je m’en sers pour explorer une affiche commandée par le médecin et auteur allemand Fritz Kahn en 1926, on l’on imagine le corps humain comme une usine chimique.
Je me sers aussi du site pour y faire jouer différentes séquences filmiques trouvées pendant ma recherche. Nous avons déjà vu comment transformer une image en tuiles, puis comment activer des fonctions Leaflet avec Scrolltrigger. J’aimerais ici montrer comment faire jouer un fichier mp4 quand un div atteint le milieu de la page et mettre la vidéo sur pause quand le div en sort. D’abord, il faut créer dans le html mes div:
Dans le CSS, on définit ce style:
Puis dans le JS je définis différentes variables associées à l’ID des mes vidéos:
Il ne me reste plus qu’à créer des Scrolltrigger pour chaque div:
Ce qui donne ceci:
On ne peut malheureusement pas faire la même chose avec des mp3, du moins dans Chrome, pour des raisons propres à Google.
Laisser un commentaire