Aujourd'hui le blog du web design vous propose de découvrir Driver.js une petite librairie javascript qui va vous permettre de mettre en avant certaines parties de votre site, pour guider la lecture de l'utilisateur.
La librairie permet de mettre en avant certains éléments d'une page en rendant plus sombre les autres éléments de la page pour ne laisser facilement lisible que l'élément qui nous intéresse. Ce qui est assez intéressent avec cette librairie c'est que ce comportement peut-être ajouté à vraiment n'importe quel type d'élément de notre page. Une image, un champ de formulaire ou tout autre élement que l'on voudrait mettre en avant.
On a donc ici la même portion du site de Driver.js avant et après le clique sur le bouton "Show Demo".
Mais la librairie ne s'arrête pas là et nous propose d'autres petites fonctionnalitées assez pratique, on peut par exemple rajouter une petite descirption à notre élement mis en avant
Et il est même possible de naviguer d'élements en éléments ! Le tout reste controlable avec les flèches gauche et droite ce qui peut être assez pratique dans certain cas.
Dans ce dernier exemple, la boîte peut-être fermé uniquement en cliquant sur le bouton close, alors que les autres sont fermable en cliquant n'importe où. Ce comportement est dû à la directive "allowClose" qui est à false.
Implémentation
La librairie reste extremement simple, l'un des points fort de cette librairie c'est qu'elle n'a pas de dépendance externe. Pour l'utiliser il faut simplement instancier un objet de type driver avec les paramètres que l'on veut.
Puis utiliser la méthode highlight de notre objet en lui passant en paramètre l'id de l'élement qui doit être mis en avant. Par exemple :
driver.highlight('#create-post');
L'installation est également basique :
npm install driver.js
La documentation reste disponible sur le github de la ressource.