À l’époque où j’enseignais le multimédia, je devais expliquer à mes étudiants les notions de perspective et de transformations en CSS. À la recherche d’une idée pour rendre ces concepts plus concrets, j’ai eu une révélation: la caméra multiplane de Disney utilisée pour filmer Bambi, Blanche neige et compagnie repose exactement sur les mêmes principes, mais appliqués dans le monde réel. Je me suis alors dit que reproduire son fonctionnement en version virtuelle serait une façon efficace de marquer l’imaginaire de mes étudiants et donc de maximiser les chances qu’ils retiennent la leçon.
Le concept est simple: définir une caméra dans l’espace, donc une une perspective, et déplacer des images superposées afin de créer une animation simulant une illusion de profondeur.
Aspect technique
Le projet repose principalement sur le CSS, avec une légère touche de JavaScript vanille permettant de modifier l’angle de vue et ainsi de mieux comprendre le fonctionnement de l’animation.
Conçu en une soirée sur CodePen, le projet a rapidement été mis de l’avant sur la page d’accueil de la plateforme et a cumulé des milliers de vues en moins de 12 heures, avant même d’être présenté en classe. Il a également été sélectionné pour figurer dans l’infolettre CodePen Spark, qui met en lumière les projets à ne pas manquer.