La Vague du Web #10

20 février 2014
604 vues

La Vague du Web est un condensé de ressources en tout genre vous permettant de suivre les dernières tendances web… Aujourd’hui dans cette 10ème chronique : un bookmarklet pour gérer vos grilles responsive, une collection de loaders CSS et une librairie JS pour animer vos favicons. Bref, place à la Vague du Web numéro #10 !

Grid Displayer

Grid Displayer est un bookmarklet permettant d’afficher la grille responsive correspondant aux frameworks Bootstrap (2 & 3) et Foundation (2, 3, 4 & 5) par dessus n’importe quel site, le tout en un clic. Pratique pour développer ou simplement « décortiquer » un site web qui tourne sur un des deux frameworks. Pour l’installer, rien de plus simple : il vous suffit de vous rendre sur le site du script et de faire un drag-and-drop dans la barre d’outils de votre navigateur.

grid_displayer

SpinKit

SpinKit est une collection de 8 spinners / loaders CSS entièrement personnalisables, aussi bien au niveau des formes et des couleurs que du comportement de l’animation. C’est une bonne alternative aux loaders qui sont dépendants de JavaScript tel que Spin.js ou Percentage Loader ; tout est géré en HTML/CSS. Un fallback JS est tout de même disponible sur GitHub.

spinkit_css

Favico.js

Favico.js est une bibliothèque JavaScript permettant de manipuler et d’animer le favicon de vos pages web à la volée, notamment en y ajoutant des badges, des images voire même des vidéos, le tout géré avec de multiples animations. C’est une manière originale d’intéragir avec l’utilisateur ; c’est notamment le cas de GMail qui indique le nombre de messages non lus directement dans le favicon.

favicojs

Bigfoot.js

La note en bas de page est une forme littéraire qui consiste à placer une ou plusieurs lignes dans le pied de page pour citer une référence, une source ou un commentaire. Si ce procédé ne vous semble pas adapté pour le web, Bigfoot.js est un plugin jQuery qui vous propose une solution plutôt originale en détectant automatiquement les notes pour générer des infobulles au niveau du contenu.

bigfoot_js

NProgress.js

NProgress.js est un plugin jQuery permettant de mettre en place une barre de progression discrète et élégante située en haut d’une page web pour indiquer qu’elle est en cours de chargement. L’effet est assez simple et plutôt pratique pour un site riche en contenu ; YouTube a d’ailleurs mis en place un système similaire quand vous effectuez une recherche.

nprogress_js

PACE

De la même manière que NProgress.js, PACE (pour « Progress Automatically Certain to Entertain ») est un plugin jQuery qui permet d’obtenir une barre de progression animée sous plusieurs formes (barre, indicateur circulaire, compteur en pourcentages, etc) pour indiquer le chargement de vos pages web ou de vos requêtes AJAX.

page_load_js

Fluidbox

Fluidbox est un plugin jQuery qui permet de recréer une lightbox responsive avec transitions fluides similaire à celle présente sur la plateforme Medium : il s’agit d’un effet de zoom avec agrandissement de l’image qui s’adapte automatiquement au navigateur. Vous pouvez également utiliser une miniature qui, au clic, vient charger une image haute définition. FancyBox 2 propose une animation similaire.

fluidbox_jquery

Rainyday.js

Rainyday.js est une bibliothèque JavaScript qui permet réaliser une animation de gouttes d’eau tombant sur ​​une surface de verre grâce à l’élément HTML5 canvas. La simulation est très réussie, notamment grâce à la détection de collision avec les éléments comme la vitre. Compatible uniquement avec les navigateurs modernes.

rainyday_js

» Voir toutes les Vagues du Web

Commentaires

  • dardoun

    Super sélection, merci. J’adore votre site, cela m’a donné envie d’arrêter de TK ;-)