johanBleuzen

Les carrousels sont un moyen très répandu et pratique de présenter du contenu. Jusqu’à très récement les carrousels en 3D était l’apanage du Flash uniquement, mais la tendance pourrait s’inverser. Certes il en existait en pseudo 3D écrit en JavaScript, mais on atteint aujourd’hui un très bon rendu… En effet, depuis la présentation de la régie publicitaire d’Apple iAd et la présentation d’un splendide carrousel en 3D codé uniquement en HTML5 et JavaScript, ce type de carrousel commence à se répandre et laisse espérer de beaux jours pour le JavaScript…

Le but de cet article est de vous présenter des carrousels qui ont un effet 3D et un rendu qui n’a rien à envier au Flash.

Le carrousel de la publicité Toy Story avec iAd

Tout d'abord, commençons par l'implémentation du carrousel présenté par Apple. Le carrousel réalisé par un développeur web nommé "Super-Ted" imite la publicité Toy-Story d'Apple avec un peu de HTML5 et très peu de JavaScript.

Comme il est présenté (voir la vidéo à droite), le carrousel ne fonctionne qu'avec un terminal tactile (par exemple un iPhone), mais il me semble que l'on pourrait faire une version "desktop" sans trop de modifications du code source. La vidéo à droite a été réalisé avec un simulateur d'iPhone, mais le rendu est particulièrement bon et fluide. Cependant à voir si un navigateur mobile avec moins de ressources sera capable d'obtenir le même rendu...

(Source : Ajaxian – Site : Super-Ted)

Un carrousel plus "classe"

Au premier abord, j’ai pensé que c’était un carrousel en Flash… Joli affichage avec reflet même pendant la rotation, coins arrondis sur les images, effet de easing lors de la rotation, je n’y ai cru qu’en regardant les sources de la pages de démonstration. Le rendu est vraiment parfait, l’accessibilité me semble correcte et c’est très fluide sur mon navigateur Chrome… Du très bon travail !

(Source : Un tweet de ma TimeLine – Site : Professor Cloud)

Un carrousel "Waterwheel"

Ce carrousel en jQuery est plus simple que les deux précédents tout du moins dans l’effet de transition en 3D. Personnellement je le trouve un peu moins joli, probablement à cause de son effet de rotation, mais i la le mérite de mettre en avant du contenu. Un bon point pour ce plugin, est qu’il est facilement customisable pour vos besoins…

(Source : La Ferme du Web – Site : Blog de Brian K Osborne)

Un carrousel démonstration

Ce carrousel est peut être le moins bien fini des 4, mais le rendu de mouvement est tellement bon que je vous le présente quand même… Le carrousel tourner sur lui même à une vitesse constante et accélère en fonction de la position de votre souris sur le carrousel. Ne vous fiez pas à la capture, allez plutôt voir la démonstration…</p>

(Source : interface.eyecon – Site : Carrousel for jQuery)

Conclusion

Ces différents carrousels montrent la monté en puissance du JavaScript sur les fonctionnalités que l'on pensait réservée au Flash. Ces démonstrations montrent que l'on a encore beaucoup de chose à faire en développement JavaScript pour obtenir par exemple l'intégration parfaite d'un carrousel de type CoverFlow directement dans une WebApp sans Flash.

Personnellement, je pense que ce n'est que le début de ce que l'on peut faire avec JavaScript...