22 plugins jQuery brillants

Des dizaines de milliers de plugins jQuery ont été écrits pour la bibliothèque jQuery. Créée en 2006 par John Resig, la bibliothèque jQuery est l'une des bibliothèques JavaScript les plus populaires. C'est une ressource fantastique pour concevoir et développer rapidement les interactions des utilisateurs. Qu'il s'agisse d'une galerie d'images ou d'un formulaire, d'une animation CSS révélatrice de contenu ou d'un effet d'explosion, la bibliothèque fournit les blocs de construction de base pour vous permettre un prototypage rapide et pour fournir une interface utilisateur unique avec un minimum de code et d'effort.

Cependant, ce n'est pas parce que vous pouvez créer votre propre solution à un problème donné que vous devriez le faire? Bien sûr que non! Il n'est absolument pas nécessaire de réinventer la roue chaque fois que vous souhaitez créer un peu de fonctionnalité commune; utilisez des plugins pour ajouter instantanément un comportement. Cela vous fera gagner encore plus de temps et d'efforts. Vous trouverez ci-dessous notre liste de plugins jQuery utiles. La plupart sont également gratuits.

Pour des ressources de conception Web plus utiles, explorez notre liste des meilleurs outils de conception web , meilleures API JavaScript et notre choix du meilleurs frameworks JavaScript à envisager.



01. Support de chat social CZM

plugins jquery

Ajoutez facilement des plugins de chat à votre site(Crédit d'image: CzMMedia)
  • Télécharger ici

Ce plugin jquery de support de chat social vous permet d'ajouter la prise en charge de comptes sociaux illimités, notamment Whatsapp, Messenger, Skype, Twitter, Telegram et Instagram. Il est facile à configurer et vous pouvez personnaliser les boutons comme vous le souhaitez. Contrairement à la plupart des plugins de cette liste, ce n'est pas gratuit et vous coûtera 9 $ à télécharger.

02. Lecteur vidéo RTO + P

Plugins jQuery: lecteur vidéo RTO + P

Créez votre propre lecteur vidéo plutôt que de vous fier aux intégrations YouTube(Crédit d'image: RTO + P)

Bien sûr, il est facile d'intégrer une vidéo à partir de YouTube ou ailleurs, mais si vous voulez un peu plus de contrôle sur votre vidéo, le lecteur vidéo RTO + P est un must. Il facilite la création et la personnalisation de votre propre lecteur vidéo qui obtient sa vidéo soit à partir de votre propre serveur ou CDN, soit à partir d'un flux Vimeo public. Utilisez la balise vidéo HTML5 pour vous simplifier la vie ou pour de meilleures performances, vous pouvez utiliser l'option de chargement différé.

03. Slick

Plugins jQuery: Slick

Quel que soit le carrousel dont vous avez besoin, faites-le avec Slick(Crédit d'image: Ken Wheeler)

Est-ce le dernier carrousel dont vous aurez besoin? Cela pourrait certainement être; Slick est un plugin jQuery qui vous offre des carrousels entièrement réactifs de presque tous les types que vous pourriez souhaiter, avec toutes sortes d'options avec lesquelles jouer, y compris le chargement paresseux, la lecture automatique, les rappels et plus encore.

04. Le mur

Plugins jQuery: Mur

Les dispositions flexibles de Muuri sont réactives, triables, filtrables et déplaçables

Pour le nec plus ultra des aménagements flexibles, le Muuri de Niklas Rämö vaut le détour. Son système de mise en page vous permet de positionner des éléments de grille de tailles variées dans un conteneur de presque toutes les manières imaginables, et il est réactif, triable, filtrable et déplaçable. Par défaut, il organisera tout de manière `` ajustée en premier '', mais vous pouvez ajouter votre propre algorithme de mise en page pour un style de mise en page différent.

05. Timeline.js

timeline.js

La chronologie fait exactement ce qu'elle dit sur l'étain et crée un curseur de chronologie

Ce plugin jQuery offre une torsion sur le composant de carrousel: Timeline.js vous fournit tout ce dont vous avez besoin pour créer une chronologie de carrousel (c'est-à-dire un curseur qui progresse en fonction des points chronologiques). Il comprend de nombreuses options de personnalisation visuelles et fonctionnelles.

06. Défilement de page incliné

défilement de page incliné

Le défilement de page incliné ajoute un effet 3D soigné à vos pages

Ce plugin de Pete R. est un excellent moyen d'attirer l'attention des gens et d'ajouter un peu de profondeur supplémentaire à votre site. Une fois installé, les éléments s'affichent lorsqu'ils défilent vers le haut de la page, et s'inclinent à nouveau lorsqu'ils sortent du haut de la page. C'est un effet superbe, agréable et facile à mettre en œuvre.

07. Point focal

plugin jquery focuspoint

Dites adieu aux images responsives mal rognées

L'avantage de la conception Web réactive est de pouvoir créer une page unique qui aura fière allure sur n'importe quel appareil. Cependant, si votre site recadre automatiquement les images pour s'adapter à certaines fenêtres, il peut souvent perdre le point focal. Avec Focuspoint, vous pouvez vous assurer que votre image a fière allure dans n'importe quel conteneur en spécifiant un point focal pour chaque image, et le plugin recadrera les parties indésirables avant les bits importants.

08. SVGMagic

Plugin jquery SVGMagic

SVGMagic crée des PNG pour remplacer les SVG là où ils ne sont pas pris en charge

L'utilisation d'images SVG est une bonne idée car elles auront l'air nettes à n'importe quelle taille, et ce plugin vous aide à le faire sans avoir à vous soucier des navigateurs qui ne les prennent pas en charge. Il recherche les images SVG et les remplace par des versions PNG si SVG n'est pas pris en charge.

09. Détection de visage

Plugin jQuery de détection de visage

Ce plugin fournit un moyen facile d'utiliser une technologie puissante

Détectez et obtenez les coordonnées des visages humains dans les images, les vidéos et les toiles avec ce plugin, qui a été écrit par Jay Salvat et utilise l'algorithme de détection de visage de Liu Liu.

10. Curseur rond

plugin jQuery rounderslider

Le curseur peut être thématisé en fonction de vos besoins

Ce curseur circulaire permet à l'utilisateur de sélectionner une plage de valeurs en passant la souris sur le cercle. Le curseur complet est la configuration par défaut, mais vous pouvez également l'utiliser pour obtenir des formes en quart de cercle, en demi-cercle et en tarte. Il existe des styles CSS que vous pouvez ajuster pour le thème de différentes manières, par exemple pour ressembler à un compteur de vitesse. Aucune image n'est impliquée; tout est fait avec CSS et JavaScript.

11. jInvertScroll

plugin jQuery jinvertscroll

Obtenez un effet de parallaxe en toute simplicité

jInvertscroll facilite la mise en œuvre du défilement horizontal avec un effet de parallaxe. Faites rouler votre molette de défilement sur leur site de démonstration pour vous déplacer latéralement tandis que deux couches de paysage se déplacent à des vitesses différentes pour créer une illusion de profondeur.

12. Slinky

Plugins jQuery: Slinky

Un design de menu qui ne se démodera pas?

Slinky est une conception de menu élégante et intemporelle qui est utile pour tout scénario dans lequel vous avez beaucoup de sous-menus. Sélectionnez un élément et une animation fait glisser le sous-menu. Il y a une démo ici .

13. TwentyTwenty

Plugins jQuery: TwentyTwenty

Le plugin ZURB vous aide à comparer des images

Au lieu de placer deux images côte à côte pour montrer les différences entre elles, vous pouvez utiliser ce plugin qui les place l'une sur l'autre. Les utilisateurs font glisser un curseur pour que l'image du bas soit visible, ce qui leur permet de voir ce qui a changé dans une situation avant-après.

14. Affichage hiérarchique de la conception des matériaux

plugins jQuery: affichage hiérarchique

Les animations peuvent aider à guider l'attention des utilisateurs

Les effets d'animation d'affichage hiérarchique peuvent être utilisés pour guider l'attention des utilisateurs et les guider d'un point à l'autre dans un processus. Cette animation peut être personnalisée pour s'adapter à votre conception et dispose d'une excellente documentation pour vous aider à démarrer.

15. Tabslet

Plugins jQuery: Tablset

Conception d'onglet minimaliste

Comme son nom l'indique, Tabslet est un plugin léger pour créer des onglets. Il prend en charge les commandes suivantes / précédentes, la rotation, les événements personnalisés, les liens profonds et de nombreuses autres fonctionnalités utiles. Jettes un coup d'oeil à la démo pour voir si cela répond à vos besoins.

16. nanogallery2

plugin jQuery nanoGALLERY

Une galerie d'images rapide et complète

nanogallery2 est conçu pour simplifier vos galeries d'images et offre une navigation à plusieurs niveaux dans les albums, la lightbox, les effets de survol combinables sur les vignettes, le diaporama, le plein écran, la pagination et le chargement paresseux des images. Il est tactile, réactif, rapide et prend en charge le stockage en nuage.

La version 2 offre une expérience utilisateur améliorée et de nouvelles fonctionnalités telles que le filtre par mots-clés, un panier, le partage social, des effets de survol avancés, des transitions d'affichage de vignettes, une page d'informations avec l'emplacement de Google Maps, etc.

17. Info-bulle

Info-bulle du plugin jQuery

Info-bulles fantaisie avec info-bulle

Tooltipster est une version moderne de l'info-bulle classique, vous permettant de présenter des info-bulles entièrement compatibles HTML dans un balisage sémantique avec CSS utilisé pour contrôler l'affichage. Il existe un large éventail d'options de configuration, ce qui le rend personnalisable pour n'importe quel scénario.

18. Magnifique Popup

Plugin jQuery Magnific Popup

Une lightbox légère et performante

Il s'agit d'un plugin lightbox pour jQuery qui se concentre sur le fait d'être aussi léger et compatible que possible. Le développeur s'est concentré sur les performances et l'expérience utilisateur, il n'a donc pas toutes les fonctionnalités des plugins lightbox alternatifs, mais il est ultra-rapide et fonctionne parfaitement sur une vaste gamme d'appareils, y compris les appareils High-DPI (Retina) tels que le MacBook Pro.

19. Bouton jQuery

Bouton du plugin jQuery

Cadrans tactiles qui fonctionnent également sur le bureau

jQuery Knob prend les éléments d'entrée et les convertit en cadrans tactiles qui fonctionnent également sur le bureau. Ceci est un excellent exemple de la façon dont vous pouvez adapter votre contenu à de nouveaux paradigmes, et vaut le coup d'œil pour l'approche technique si rien d'autre.

20. Typeahead.js

Plugin jQuery Typeahead

Outil de saisie semi-automatique pratique conçu par l'équipe de développement de Twitter

Produit de l'équipe de développement de Twitter, Type Ahead est un outil facile à mettre en œuvre qui extrait d'une source de données locale ou externe à mesure que votre utilisateur tape dans une zone de saisie, fournissant des suggestions de saisie semi-automatique au fur et à mesure.

21. Lettering.js

Lettrage du plugin jQuery

Obtenez un contrôle précis sur votre type

Lettering.js fournit un contrôle granulaire sur les caractères individuels de votre type, vous permettant d'appliquer le crénage, de colorer des lettres individuelles et d'appliquer des écouteurs d'événements. Il fonctionne également bien avec FitText (ci-dessous), vous donnant un contrôle de style bureau sur votre typographie tout en restant réactif.

22. FitText

Plugin jQuery FitText

Redimensionnez automatiquement votre texte pour des titres réactifs

Ce plugin pratique vous permet de remplir la largeur de votre conteneur avec votre type, mais en augmentant ou diminuant automatiquement la taille du texte en fonction. Conçu pour faciliter les titres réactifs, le plugin s'intègre également à Lettering.js pour permettre un style granulaire par caractère.

Articles Liés: