Les carrousels en 3D sont à la mode

J’ai vu apparaître ces derniers jours des carrousels en 3D sur les pages des sites de vente en ligne Amazon et Alapage, drôle de coïncidence !

D’après Wikipedia, un carrousel est – notamment – « une attraction de type manège consistant en une plateforme tournante avec des sièges pour des passagers », c’est à dire ni plus ni moins qu’un manège.

Ce terme est aussi utilisé en photographie pour désigner les bacs circulaires que l’on utilise avec les projecteurs de diapositives, ou en musique pour désigner les supports des disques dans les jukeboxes.

Au niveau des interfaces graphiques, la navigation dans une liste représentée par un carrousel en 3 dimensions fait petit à petit son chemin. Elle donne une impression de manipulation physique des objets qui améliore l’ergonomie et l’intuitivité de l’interface.

Apple l’a bien compris en rachetant CoverFlow, un carrousel – non circulaire celui-ci – permettant de sélectionner de la musique dans iTunes en visualisant les pochettes :

CoverFlow. Navigation en 3D dans la discothèque iTunes

Microsoft a aussi fait la démonstration des capacités 3D de Windows Presentation Foundation et de Silverlight – dans Popfly par exemple – à l’aide de carrousels.

Le carrousel d’Amazon est en Flash, une technologie vectorielle, et donc particulièrement bien adaptée à la simulation de la 3D par déformation :

Le carrousel d’Amazon

Mais il n’est pas nécessaire de disposer d’une technologie spécifiquement dédiée ou adaptée à la 3D pour réaliser de tels carrousels, comme le montre aujourd’hui Alapage :

Le carrousel d’Alapage

Ce carrousel s’appuie tout simplement sur l’élément « 3D Carousel » de l’excellent plugin Interface de la librairie JavaScript jQuery.

Si vous voulez signaler une erreur ou proposer une modification de ce texte, n'hésitez pas à l'éditer directement à la source sur Github.

6 commentaires

Twitter 500px Flickr Facebook Instagram Github Feed