50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant

50 super plugins jQuery récents pour rendre votre site ergonomique et attrayant

Cela fait quelques années que le Javascript et notamment jQuery – qui simplifie et norme son utilisation – continuent d’être de plus en plus utilisés. Aujourd’hui cette technologie est toujours plus facile à exploiter grâce à l’installation de plugins, c’est-à-dire de petits modules de code. Il n’a jamais été aussi facile qu’aujourd’hui de rendre un site ergonomique, originale et attractif !

Ces 50 plugins sélectionnés avec soin parmi les milliers existants vous permettront de transformer n’importe quel site fade en site riche, intuitif, interactif et ergonomique, y compris sur mobile. Les plugins sont classés en plusieurs catégories pour vous y retrouver plus aisément : effets de navigation / scroll / parallax, plugins pour menus de navigation, sliders et diaporamas, lightbox, mise en page dynamique en grille multi-colonne, tooltips, personnalisations d’éléments d’interaction (calendrier, menu « dropdown », scrollbar, etc…), et encore plein d’autres plus ou moins inclassables… mais toujours utiles !

Leur mise en place est en général très simple. Selon le plugin et ses capacités son utilisation et les réglages varient de très faciles à plus avancé pour les connaisseurs. Cette liste étant limitée à 50 plugins, vous êtes invités à partager en commentaire ceux qui vous semblent indispensable à cette liste et qui n’y figure pas.

 

Plugins pour réaliser des sites avec effets de scroll et/ou de la parallax

Parallax.js

Déjà présenté dans Le meilleur du web, ce plugin très puissant et relativement facile à mettre en place vous permettra de recréer un effet de parallax facilement. De plus il répond au gyroscope des mobiles !

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Parallax.js

Pour créer des sites à parallax verticale facilement :

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

One Page Scroll

Comme son nom l’indique, ce plugin vous facilite le développement de site en une seule page basé sur un long scroll vertical.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Parallax.js

Ils pourraient être plus originaux dans le choix de leur nom de plugin ! ;)

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Fullpage.js

Un plugin facile à utiliser pour créer des sites web fullscreen (en pleine page) en scrolling.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Skrollr

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Cool Kitten
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

jQuery Scroll Path

Comme l’image l’indique ce plugin vous permet de définir des chemins de scroll personnalisés.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

ScrollUp
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

Plugins pour sliders

ResponsiveSlides.js : slider responsive pour moins de 1ko

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Flexisel – un plugin de slider responsive

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

LiquidSlider – un slider de contenu responsive

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Plugins de lightbox et slideshow (galeries et diaporamas d’images)

Galerie de miniatures qui s’ouvre et s’étend au clic

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Least.js

Une autre galerie d’images basé sur un principe proche de celui du dessus.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Magnific Popup

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

Swipebox – lightbox optimisée pour ordinateur, tablette et mobile
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

MultiDialog

MultidDialog utilise le widget UI Dialog jQuery pour une lightbox intégrant toutes les fonctionnalités nécessaires.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

Smart Notification

Plugin d’ouverture de pop-up / lightbox de notification, avec la possibilité d’inclure des vidéos.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

iLightBox

Plugin de lightbox responsive qui offre des apparences de bases très esthétique et une API ergonomique.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Dynamic Lightbox

A partir d’un seul fichier, Dynamic Lightbox vous offre la possibilité de créer la lightbox que vous voulez grâce à un éditeur visuel. Il supporte les images, l’HTML, Youtube, Dailymotion, Vimeo, Google Maps, une iframe et peut charger du contenu HTML en Ajax.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Responsive Slideshow Photo Gallery Grid 

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

jQuery Giga Image Viewer

Ce plugin jQuery vous permet d’afficher des images avec des points-clés à agrandir. Il permet apparemment aussi de protéger vos images en haute résolution.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Flare Responsive Mobile-Optimized Lightbox Plugin

Ce plugin de lightbox basé sur jQuery est responsive et optimisé pour tablettes et mobiles et répond donc au toucher.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

Plugins pour mise en page dynamique en grille multi-colonne

jQuery Nested

Puissant plugin dynamique de mise en page en grille multi-colonne avec une optimisation maximale de l’espace.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

jResponsive – Transitions douces et élégantes

Ce plugin organise votre contenu dynamique de façon optimisée et responsive. Il peut être appliqué à un container et tous ses enfants seront réorganisés et replacés pour occuper l’espace au mieux (assez similaire à mon portfolio).

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Plugins pour menus de navigation

FlexNav

Ce plugin vous permet de créer des menus (déroulants si nécessaires) prévus pour résister à tous les supports.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Smint : un menu en sticky qui change au scroll (parfait pour sites one-page)

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

PageSlide

Un plugin qui vous permet de faire « glisser » votre page de contenu vers le côté afin de dévoiler un panneau secondaire, comme un menu de navigation par exemple, à la façon de nombreuses applications pour mobiles.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Sidr – même principe que celui du dessus
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Plugins pour tooltips (infobulles)

qTip2

Je pense qu’il s’agit là du plugin jQuery le plus complet et le plus puissant pour créer des tooltips que j’ai vu à ce jour.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

PowerTip

Ce plugin de tooltip au rollover est très complet et possède sûrement tout ce dont vous avez besoin.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Progression.js

Un plugin astucieux qui donne aux utilisateurs des conseils et informations sur leur avancement en temps réel.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

jQuery Pin – Fixer un élément n’importe où dans un container

Query.Pin vous permet d’attacher un élément quelconque où vous le souhaitez à la manière d’une punaise sur un tableau. Il est à noter qu’il peut facilement être retiré pour les petites résolutions où il deviendrait inutile.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Plugins pour customiser les éléments d’interaction et d’ergonomie

Vous souhaitez personnaliser une scrollbar, un menu « dropdown », un calendrier intuitif ou encore permettre un upload de fichier ? Voici une liste qui vous sera utile.

Dropdown.dot.js – Pour des menus « dropdowns » flexibles

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Pickadate.js

Voici comme son nom l’indique un plugin jQuery léger de sélecteur de date responsive et adapté aux mobiles.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Perfect-Scrollbar

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Typeahead.js – une librairie d’auto-complétion remplie de fonctionnalités

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

iCheck – Customisez vos checkboxs et boutons radio

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

jQuery File Upload

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Plugin de création de graphiques

Morris.js

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Plugins divers mais utiles !

Changement d’images par l’apparition d’une grille en transparence

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Complexify

Ce plugin vous permet de donner des indications aux utilisateurs sur la force de leur mot de passe et ainsi savoir s’il est assez complexe.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

jQuery HiddenPosition

Ce plugin vous permet de placer des éléments relativement par rapport à la position d’autres éléments.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Chardin.js – Simple couche d’instructions pour applications

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Google Map

Ce plugin jQuery vous permet de manipuler facilement l’API Google Maps.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

jQuery Alpha Image Plugin

Maîtrisez à volonté et avec précision la transparence de vos images avec ce plugin jQuery.

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

 

Tutoriel pour créer une horloge digitale (1/2)

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Tutoriel pour aouter une alarme à l’horloge digitale (2/2)

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

 

Ractive.js : pour manipuler le DOM aisément

Ce plugin de manipulation du DOM semble puissant et bien pensé pour manipuler les données, mettre à jour le DOM, gérer des évènements, etc… De nombreux exemples et tutoriels montrent son fonctionnement et son efficacité.
nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

Firechat

Firechat est un plugin de chat en temps réel open-source basé sur Firebase. Il offre du multi-utilisateurs sécurisé, multi-room avec authentification flexible, des fonctionnalités de modération, présence et recherche d’utilisateur, messages privés, invitations à chatter, etc…

nouveau plugin jQuery pour rendre votre site ergonomique et attrayant

via

 

Il y a probablement encore plein d’excellents plugins récents qui ne figurent pas sur cette liste, je vous invite à les lister en commentaire.

Auteur: Gaétan Weltzer, comme toujours en fait.

Articles qui pourraient vous plaire

Commentaires (16)

  1. Sympa cette jolie sélection merci :)
    Par contre j’ai un peu de mal avec ton titre, pour moi certains de ces plugins bien que pratiques peuvent au contraire mettre en péril l’ergonomie du site en prenant par exemple des « contrôles » de la navigation et perdant souvent l’utilisateur. Du coup attrayant oui, ergonomique justement pas toujours :)

    • Merci pour ton commentaire. Pour moi ce n’est pas un « mauvais plugin » qui va réduire l’ergonomie mais plutôt ce que le webdesigner va en faire. Tout dépend des choix – judicieux ou non – qui seront faits. De même l’expérience prévaut sur l’ergonomie classique dans des sites en parallax ou en scrolling non vertical donc pour ceux-là on peut parler de plugin plus pour l’expérience que l’ergonomie.

      Pour l’aspect purement ergonomique, l’ajout de lightbox, tooltip, slider, le calendrier, les plugins de multi-colonne, navigation responsive, etc… sont pour moi des plugins agrémentant nettement l’ergonomie. ;)

  2. Pingback: 50 super plugins jQuery récents pour ren...

  3. Pingback: 50 super plugins jQuery récents pour ren...

  4. bonjour
    aurais-tu trouvé un plugin qui permette d’insérer dans des articles des iframe en responsive design ? je n’ai pas trouvé. mon site est entièrement responsive mais j’en ai besoin pour intégrer des images à 360° ou visites virtuelles mais qui s’adaptent au type d’écran car c’est mon seul élément pas responsive. merci d’avance ;)

  5. Pingback: Parrallaxe | Pearltrees

  6. Pingback: Jquery | Pearltrees

  7. Pingback: Antony régnier (antony77) | Pearltrees

  8. Pingback: 50 plugins jQuery pour rendre votre site ergono...

  9. Pingback: Parallax | Pearltrees

Laisser un commentaire

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>