Vous en voyez de plus en plus, ils sont devenus incontournables, ils animent les pages d’accueil avec leur déroulants animés de plus en plus accrocheurs, ils sont visibles sur smartphone et tablettes, ils n’utilisent pas la technologie Flash d’Adobe, ce « ils » ce sont les « sliders » ou visionneuses Javascript.

Je vous propose un petit aperçu de ce que l’on peut trouver aujourd’hui comme sliders pour animer votre page d’accueil avec images et slogans… Je vais rester sur la plateforme WordPress pour tous les exemples, sachant que l’on trouve ces solutions en général sur les CMS les plus courants.

Le slider est à l’origine une simple visionneuse (ou galerie Javascript) qui proposait d’afficher des photos, on en trouvaient sous forme plus ou moins évoluées à base de technologie Flash, les plus connues étaient SimpleViewer, Jw-Player (ou rotator), PieceMaker, Mediaplayer, etc. J’ai acheté plusieurs licences de ces produits et ils ont remplis leurs rôles durant pas mal d’années. Mais la présence de plus en plus grandissante des terminaux mobiles dans les statistiques des visites de sites Internet à mis à mal leur pérennité. Aujourd’hui hors Javascript point de salut.

De la simple visionneuse à l’extension dédiée à l’animation 2D (et bientôt 3D ?)

Si vous visitez le portail Themeforest et sa section dédiée au CMS WordPress vous y verrez de très nombreux exemples de page d’accueil utilisant un solution animée de présentation. Les plus basiques vous proposent, dans l’interface d’administration, de sélectionner un jeu d’images et d’y ajouter des légendes et textes (Titre/description) souvent placés et animés de manière identique pour chaque image (ou slide/diapositive), ces solutions sont de plus en plus abandonnées au profit de vrais systèmes de création d’animation.

Quelques exemples de sliders :

• Cycle slider simple (Javascript)
• Flashmo (Flash)
• Nivo Slider (Javascript)
• Slider Pro (Javascript)
• Kwicks Slider (Javascript)
• Cycle slider avec textes (Javascript)
• Piecemaker (Flash)
• Royal Slider (Javascript)
• ShowBizPro (Javascript)
• Revolution Slider (Javascript)
• Cute 3D Slider (Javascript)
• LayerSlider (Javascript)

On voit à travers ces exemples que l’impact d’un déroulant peut être primordial pour arrêter l’attention du visiteur sur votre site, cette démarche demande néanmoins un vrai travail de communication, du teasing à la suite humoristique, beaucoup de choses peuvent être faites et aussi évités, il faut savoir choisir. Une chose est sûre, plus vous souhaiterez de latitude dans l’exécution de l’animation, plus l’interface de gestion sera complexe.

Ce panorama est là pour vous inviter à réfléchir à ce que vous souhaitez faire, en effet j’ai pu constater que ces sliders n’offrent pas toujours une ergonomie de création digne de ce nom. Passer 10 mn à régler un tempo, un timing de calque ou l’ordre d’apparition peut vite alourdir la gestion d’un site dynamique.

A ce jeu Revolution Slider est le plus ergonomique, puissant dans la chronologie temporelle, duplication des slides et des calques, plusieurs styles de textes présents, gestion du temps de transition des slides, animation de fin pour les calques, de quoi faire des choses très dynamiques, il lui manque quelques effets 3D pour être au top.

LayerSlider est moins complet mais un peu plus ergonomique avec ses onglets d’interface, mais là pas de gestion du temps de transition entre slide, une présentation des options plus fouillis et qui peut faire perdre du temps.

D’autres sliders sont moins dédiés à l’animation mais proposent différentes façon de présenter du contenu à l’instar de ShowBizPro et ces galeries d’images ou de produits (e-commerce), on à ici un grand choix pour afficher du contenu et l’animer dans une page.

Quoi de mieux que d’exprimer un concept, une idée, en une séquence animée ?
Devenez réalisateur avec un bon slider !

Vous trouverez, sur le portail d’extensions web Codecanyon, les « sliders » les plus performants : Revolution Slider, Cute 3D, Layer Slider, Royal Slider…

Sources : Themeforest, Codecanyon