В это обзоре мы познакомимся с 30 бесплатными JavaScript плагинами и библиотеками, которые сфокусированы на определенных задачах. Это простые, полезные и легкие решения, которые помогут сделать процесс веб-дизайна и разработки гораздо проще и быстрее.
Как и следовало ожидать ниже вы найдете много плагинов для создания ползунков, галерей с изображениями, адаптивных меню, а также много других полезных плагинов и библиотек. Также в списке представлены плагины, которые предлагают действительно уникальные функциональные возможности. Давайте взглянем на список!
![](https://habrastorage.org/files/5e3/5be/356/5e35be3569a143d58689286614f7a1d1.png)
Philter доступен как плагин для jQuery и vanilla JavaScript. Дает вам возможность контролировать CSS фильтры с HTML атрибутами.
![](https://habrastorage.org/files/327/c9a/52f/327c9a52f5cf4df9bebabd8af77d4778.jpg)
Современный плагин, который позволит Вам создавать красивые модальные окна с оригинальным дизайном. Всплывающие окна на jQuery можно настраивать с разными эффектами и разметкой. Есть готовые варианты для фрейма, формы, AJAX`a. Все, что необходимо — это подключить библиотеку и стили плагина. Скачать плагин jQuery modal можно по ссылке выше.
![](https://habrastorage.org/files/565/a41/ce7/565a41ce7fee49e9973ac31986faf745.gif)
Algolia Places может мгновенно превратить любой input в элемент поиска адреса с помощью автозаполнения. Она имеет встроенную систему ранжирования, которая предлагает наиболее очевидные варианты в первую очередь, и другие мощные функции, такие как возможность игнорировать небольшие опечатки и понять, что на самом деле имел в виду пользователь. Библиотека очень проста в использовании и поможет вам сэкономить кучу времени.
![](https://habrastorage.org/files/37e/d90/8c4/37ed908c4e5e40989b242694983b02a4.gif)
Библиотека Marginotes позволит вам сделать крутые подсказочки «на полях», почти как на Медиуме. Есть версия с jQuery и без неё.
![](https://habrastorage.org/files/878/4dc/c0f/8784dcc0f72f4cd3b46432f207d73d91.jpg)
Microlight.js — это небольшой инструмент, предназначенный для подсветки кода в любом языке программирования. Вам не потребуется подключение сторонних пакетов или библиотек, все уже готово в этом миниатюрном скрипте.
![](https://habrastorage.org/files/c04/5e7/542/c045e75421544ed6960d2aa49ba4f001.png)
Force.js – это простой способ анимировать скроллинг или другой элемент на странице. Библиотека имеет много различных функций для анимации и пытается использовать CSS-анимации по умолчанию, что очень хорошо, однако, если браузер не поддерживает CSS3, будут использованы средства javascript. Force.js поддерживает даже настолько старые браузеры, которые не поддерживают свойство transition.
![](https://habrastorage.org/files/4b5/e9b/5cc/4b5e9b5cc9a24c41aedec0d26f1077cf.png)
Substance это JavaScript библиотека для редактирования веб контента. Она включает в себя все необходимые инструменты для создания тестовых редакторов и системы веб публикаций.
![](https://habrastorage.org/files/e5e/436/dd4/e5e436dd4fd44ab08630caa063b91771.png)
Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице).
![](https://habrastorage.org/files/3a7/1e4/3db/3a71e43dbf4140eda36cf854464c8ddc.jpg)
Datedropper плагин JQuery, который обеспечивает быстрый и простой способ управлять полем ввода даты.
![](https://habrastorage.org/files/da5/b10/e3a/da5b10e3a04c47e69f6435488572d124.jpg)
JQuery плагин, который создает эффект лупы для увеличения изображений и HTML-элементов.
![](https://habrastorage.org/files/5c9/872/687/5c9872687bd5437d9c7a34ee8d3b667f.jpg)
Генератор структуры в стиле masonry для элементов с фиксированной шириной.
![](https://habrastorage.org/files/d3f/b09/a87/d3fb09a87525471394cdccd4659ba031.jpg)
jQuery formBuilder это новый jQuery плагин для быстрого создания drag & drop форм.
![](https://habrastorage.org/files/fdf/8d6/d36/fdf8d6d362c045da962f6ef98500ef95.jpg)
Библиотека sweetAlert это замена стандартной функции window.alert(). Библиотека не несет за собой никакие зависимости. Состоит только из двух файлов: js и css. Эта библиотека имеет три особенности. Первое — вы можете использовать ее в любом проекте. Второе это отдельная ветка специально адаптированная для Twitter Bootstrap. И третье, отдельная ветка которую вы можете использовать в ваших Android проектах.
![](https://habrastorage.org/files/383/d6c/506/383d6c506814462c9d23b49a7c7f15e7.jpg)
Библиотека Popper.js предлагает ещё один легковесный вариант для имплементации всплывающих подсказок на сайтах и web приложениях. В сжатом виде занимает около 4 килобайт и имеет удобный API.
![](https://habrastorage.org/files/9bf/8ba/70f/9bf8ba70f7de43f0b2bdc4fa2c968528.jpg)
Image Blur Plugin представляет собой легкий кросс-браузерный плагин JQuery для размытия изображений.
![](https://habrastorage.org/files/f85/a58/a6e/f85a58a6e00e450c8632e60e13cc3cf6.jpg)
LightGallery это скрипт-галерея (лайтбокс), написанная на языке JavaScript, которая показывает изображения поверх веб страницы и способна работать как с одиночными изображениями, так и с галереями с использованием эффектов плавного изменения размеров и прозрачности (fade in/out). Скрипт протестирован во всех A-grade браузерах: IE 7+, Firefox 2+, Safari 3+, Opera 9.5+, Chrome.
![](https://habrastorage.org/files/685/2dc/268/6852dc2682b848f7866a2e8dedac4532.jpg)
Небольшой, удобный JQuery плагин для изменения названия и фавикона страницы, при уходе пользователя с вашего сайта.
![](https://habrastorage.org/files/7ff/ac6/bb4/7ffac6bb4e4f407abaaddbf179658602.png)
Плагин, позволяющий анимировать элементы при скролле страницы.
![](https://habrastorage.org/files/fc8/297/a03/fc8297a03f9d4ab0827d9009a3713bf9.jpg)
baguetteBox.js простой и легкий в использовании лайтбокс, без зависимостей от внешних библиотек с поддержкой жестов на мобильных устройствах. Написан на чистом JavaScript.
![](https://habrastorage.org/files/088/9c2/099/0889c2099d36480d818afa41cffb7366.jpg)
Bideo.js это JavaScript библиотека, которая упрощает процесс добавления видео на фон веб-страниц.
![](https://habrastorage.org/files/93c/e0b/5bf/93ce0b5bf61a406aa3f3f8755cd3f8f7.jpg)
Небольшой инструмент, который поможет вам быстро создавать стилизованные всплывающие окна с выбором даты. Используется стандартный HTML-тег input с назначением класса плагина. Ничего лишнего, все аккуратно и без зависимостей.
![](https://habrastorage.org/files/ca7/914/21e/ca791421ebec454ebf1d511d64166278.jpg)
Slidebars – это JQuery фреймворк позволяющий очень быстро подобрать необходимые стили для мобильного меню без определённой привязки к источнику. Slidebars может редактировать и обрабатывать все основные размеры мобильного меню сайта.
![](https://habrastorage.org/files/c7d/2a6/dfd/c7d2a6dfde214d01a57f47e805186ff7.png)
Иногда требуется создать на сайте интерактивные звуковые эффекты. Данный плагин справиться с любой задачей в этом направлении. Устанавливайте любые звуковые дорожки на любые блоки и элементы.
![](https://habrastorage.org/files/fa7/877/fdd/fa7877fddac645d78b9428862b1a3ea1.jpg)
Anime.js – гибкая и легковесная JavaScript библиотека, помогающая анимировать различные штуки. Если вам нужно добавить анимации, то с помощью anime.js сделать это будет легче. Проект существует не так давно, но уже успел собрать почти семь тысяч звезд на гитхабе
![](https://habrastorage.org/files/7d0/f96/5b9/7d0f965b98264ad89db49a36f4921ad1.jpg)
Делаете много форм, но каждый раз пишите маски для инпутов вручную? Тогда библиотека Cleave.js — для вас. Она предлагает большое количество вариантов форматирования текстовых полей.
![](https://habrastorage.org/files/743/201/0b4/7432010b454841dab3372b9fa20130c1.jpg)
Skippr — это простой и удобный в использовании jQuery плагин, для реализации полноэкранного слайдера на вашем сайте.
![](https://habrastorage.org/files/cd4/ac7/c70/cd4ac7c70fcc43ad84eb1cca9f404e87.jpg)
Turntable.js – библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать. Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.
![](https://habrastorage.org/files/cf1/f45/6ee/cf1f456eefa64c0db158ed330f847ea6.png)
Легкий плагин jQuery для создания удобного превью GIF-анимаций, как на Facebook. Подключаете плагин и указываете идентификатор объекта, к которому хотите применить эффекты.
![](https://habrastorage.org/files/bbf/422/cf4/bbf422cf41ce4ff4852f5d330fe9b1c8.jpg)
Плагин написан на vanilla JavaScript, расширяет возможности MediumEditor (копии medium.com WYSIWYG редактора) и дает возможность пользователям вставлять в редактор различные виды контента (в зависимости от доступных аддонов).
Push.js это кросс-браузерное решение для получения и запуска JavaScript desktop уведомлений.
Крошечная библиотека JavaScript, которая делает встроенные объекты отзывчивыми, сохраняя при этом оригинальные пропорции. Она поддерживает широкий спектр источников, включая Youtube, Flickr, Vine, VideoPress и DailyMotion.
Благодаря этой библиотеке, вы сможете добавить кнопку Twitter к любому тексту на веб-странице. Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.
Как и следовало ожидать ниже вы найдете много плагинов для создания ползунков, галерей с изображениями, адаптивных меню, а также много других полезных плагинов и библиотек. Также в списке представлены плагины, которые предлагают действительно уникальные функциональные возможности. Давайте взглянем на список!
Philter
![](https://habrastorage.org/files/5e3/5be/356/5e35be3569a143d58689286614f7a1d1.png)
Philter доступен как плагин для jQuery и vanilla JavaScript. Дает вам возможность контролировать CSS фильтры с HTML атрибутами.
iziModal.js
![](https://habrastorage.org/files/327/c9a/52f/327c9a52f5cf4df9bebabd8af77d4778.jpg)
Современный плагин, который позволит Вам создавать красивые модальные окна с оригинальным дизайном. Всплывающие окна на jQuery можно настраивать с разными эффектами и разметкой. Есть готовые варианты для фрейма, формы, AJAX`a. Все, что необходимо — это подключить библиотеку и стили плагина. Скачать плагин jQuery modal можно по ссылке выше.
Algolia Places
![](https://habrastorage.org/files/565/a41/ce7/565a41ce7fee49e9973ac31986faf745.gif)
Algolia Places может мгновенно превратить любой input в элемент поиска адреса с помощью автозаполнения. Она имеет встроенную систему ранжирования, которая предлагает наиболее очевидные варианты в первую очередь, и другие мощные функции, такие как возможность игнорировать небольшие опечатки и понять, что на самом деле имел в виду пользователь. Библиотека очень проста в использовании и поможет вам сэкономить кучу времени.
Marginotes
![](https://habrastorage.org/files/37e/d90/8c4/37ed908c4e5e40989b242694983b02a4.gif)
Библиотека Marginotes позволит вам сделать крутые подсказочки «на полях», почти как на Медиуме. Есть версия с jQuery и без неё.
Microlight.js
![](https://habrastorage.org/files/878/4dc/c0f/8784dcc0f72f4cd3b46432f207d73d91.jpg)
Microlight.js — это небольшой инструмент, предназначенный для подсветки кода в любом языке программирования. Вам не потребуется подключение сторонних пакетов или библиотек, все уже готово в этом миниатюрном скрипте.
Force.js
![](https://habrastorage.org/files/c04/5e7/542/c045e75421544ed6960d2aa49ba4f001.png)
Force.js – это простой способ анимировать скроллинг или другой элемент на странице. Библиотека имеет много различных функций для анимации и пытается использовать CSS-анимации по умолчанию, что очень хорошо, однако, если браузер не поддерживает CSS3, будут использованы средства javascript. Force.js поддерживает даже настолько старые браузеры, которые не поддерживают свойство transition.
Substance
![](https://habrastorage.org/files/4b5/e9b/5cc/4b5e9b5cc9a24c41aedec0d26f1077cf.png)
Substance это JavaScript библиотека для редактирования веб контента. Она включает в себя все необходимые инструменты для создания тестовых редакторов и системы веб публикаций.
List.js
![](https://habrastorage.org/files/e5e/436/dd4/e5e436dd4fd44ab08630caa063b91771.png)
Простой мини-скрипт List.js размером 7 КБ добавляет интерактивности маркированным спискам в HTML. С помощью скрипта можно сделать удобный поиск, сортировку, редактирование списка с добавлением или удалением новых элементов (например, адресная книга на странице).
Datedropper.js
![](https://habrastorage.org/files/3a7/1e4/3db/3a71e43dbf4140eda36cf854464c8ddc.jpg)
Datedropper плагин JQuery, который обеспечивает быстрый и простой способ управлять полем ввода даты.
jfMagnify
![](https://habrastorage.org/files/da5/b10/e3a/da5b10e3a04c47e69f6435488572d124.jpg)
JQuery плагин, который создает эффект лупы для увеличения изображений и HTML-элементов.
Bricks.js
![](https://habrastorage.org/files/5c9/872/687/5c9872687bd5437d9c7a34ee8d3b667f.jpg)
Генератор структуры в стиле masonry для элементов с фиксированной шириной.
jQuery formBuilder
![](https://habrastorage.org/files/d3f/b09/a87/d3fb09a87525471394cdccd4659ba031.jpg)
jQuery formBuilder это новый jQuery плагин для быстрого создания drag & drop форм.
SweetAlert2
![](https://habrastorage.org/files/fdf/8d6/d36/fdf8d6d362c045da962f6ef98500ef95.jpg)
Библиотека sweetAlert это замена стандартной функции window.alert(). Библиотека не несет за собой никакие зависимости. Состоит только из двух файлов: js и css. Эта библиотека имеет три особенности. Первое — вы можете использовать ее в любом проекте. Второе это отдельная ветка специально адаптированная для Twitter Bootstrap. И третье, отдельная ветка которую вы можете использовать в ваших Android проектах.
Popper.js
![](https://habrastorage.org/files/383/d6c/506/383d6c506814462c9d23b49a7c7f15e7.jpg)
Библиотека Popper.js предлагает ещё один легковесный вариант для имплементации всплывающих подсказок на сайтах и web приложениях. В сжатом виде занимает около 4 килобайт и имеет удобный API.
Image Blur Plugin
![](https://habrastorage.org/files/9bf/8ba/70f/9bf8ba70f7de43f0b2bdc4fa2c968528.jpg)
Image Blur Plugin представляет собой легкий кросс-браузерный плагин JQuery для размытия изображений.
Lightgallery.js
![](https://habrastorage.org/files/f85/a58/a6e/f85a58a6e00e450c8632e60e13cc3cf6.jpg)
LightGallery это скрипт-галерея (лайтбокс), написанная на языке JavaScript, которая показывает изображения поверх веб страницы и способна работать как с одиночными изображениями, так и с галереями с использованием эффектов плавного изменения размеров и прозрачности (fade in/out). Скрипт протестирован во всех A-grade браузерах: IE 7+, Firefox 2+, Safari 3+, Opera 9.5+, Chrome.
iMissYou.js
![](https://habrastorage.org/files/685/2dc/268/6852dc2682b848f7866a2e8dedac4532.jpg)
Небольшой, удобный JQuery плагин для изменения названия и фавикона страницы, при уходе пользователя с вашего сайта.
ScrollReveal
![](https://habrastorage.org/files/7ff/ac6/bb4/7ffac6bb4e4f407abaaddbf179658602.png)
Плагин, позволяющий анимировать элементы при скролле страницы.
baguetteBox.js
![](https://habrastorage.org/files/fc8/297/a03/fc8297a03f9d4ab0827d9009a3713bf9.jpg)
baguetteBox.js простой и легкий в использовании лайтбокс, без зависимостей от внешних библиотек с поддержкой жестов на мобильных устройствах. Написан на чистом JavaScript.
Bideo.js
![](https://habrastorage.org/files/088/9c2/099/0889c2099d36480d818afa41cffb7366.jpg)
Bideo.js это JavaScript библиотека, которая упрощает процесс добавления видео на фон веб-страниц.
flatpickr
![](https://habrastorage.org/files/93c/e0b/5bf/93ce0b5bf61a406aa3f3f8755cd3f8f7.jpg)
Небольшой инструмент, который поможет вам быстро создавать стилизованные всплывающие окна с выбором даты. Используется стандартный HTML-тег input с назначением класса плагина. Ничего лишнего, все аккуратно и без зависимостей.
Slidebars
![](https://habrastorage.org/files/ca7/914/21e/ca791421ebec454ebf1d511d64166278.jpg)
Slidebars – это JQuery фреймворк позволяющий очень быстро подобрать необходимые стили для мобильного меню без определённой привязки к источнику. Slidebars может редактировать и обрабатывать все основные размеры мобильного меню сайта.
Loud Links
![](https://habrastorage.org/files/c7d/2a6/dfd/c7d2a6dfde214d01a57f47e805186ff7.png)
Иногда требуется создать на сайте интерактивные звуковые эффекты. Данный плагин справиться с любой задачей в этом направлении. Устанавливайте любые звуковые дорожки на любые блоки и элементы.
anime.js
![](https://habrastorage.org/files/fa7/877/fdd/fa7877fddac645d78b9428862b1a3ea1.jpg)
Anime.js – гибкая и легковесная JavaScript библиотека, помогающая анимировать различные штуки. Если вам нужно добавить анимации, то с помощью anime.js сделать это будет легче. Проект существует не так давно, но уже успел собрать почти семь тысяч звезд на гитхабе
Cleave.js
![](https://habrastorage.org/files/7d0/f96/5b9/7d0f965b98264ad89db49a36f4921ad1.jpg)
Делаете много форм, но каждый раз пишите маски для инпутов вручную? Тогда библиотека Cleave.js — для вас. Она предлагает большое количество вариантов форматирования текстовых полей.
Skippr
![](https://habrastorage.org/files/743/201/0b4/7432010b454841dab3372b9fa20130c1.jpg)
Skippr — это простой и удобный в использовании jQuery плагин, для реализации полноэкранного слайдера на вашем сайте.
Turntable.js
![](https://habrastorage.org/files/cd4/ac7/c70/cd4ac7c70fcc43ad84eb1cca9f404e87.jpg)
Turntable.js – библиотека, которая позволяет из нескольких картинок сделать одну модель, которую можно вращать. Плюсы этой библиотеки в том, что она легковесная, отзывчивая, легка в установке и настройке.
jqGifPreview
![](https://habrastorage.org/files/cf1/f45/6ee/cf1f456eefa64c0db158ed330f847ea6.png)
Легкий плагин jQuery для создания удобного превью GIF-анимаций, как на Facebook. Подключаете плагин и указываете идентификатор объекта, к которому хотите применить эффекты.
MediumEditor
![](https://habrastorage.org/files/bbf/422/cf4/bbf422cf41ce4ff4852f5d330fe9b1c8.jpg)
Плагин написан на vanilla JavaScript, расширяет возможности MediumEditor (копии medium.com WYSIWYG редактора) и дает возможность пользователям вставлять в редактор различные виды контента (в зависимости от доступных аддонов).
Push.js
Push.js это кросс-браузерное решение для получения и запуска JavaScript desktop уведомлений.
SuperEmbed.js
Крошечная библиотека JavaScript, которая делает встроенные объекты отзывчивыми, сохраняя при этом оригинальные пропорции. Она поддерживает широкий спектр источников, включая Youtube, Flickr, Vine, VideoPress и DailyMotion.
InlineTweet.js
Благодаря этой библиотеке, вы сможете добавить кнопку Twitter к любому тексту на веб-странице. Просто добавьте span с нужными атрибутами и InlineTweet автоматически добавит выбранный текст в ссылку. При нажатии по тексту, он сгенерирует твит, вместе с хэштегами и URL.
Поделиться с друзьями
Комментарии (16)
RouR
07.09.2016 19:15+3Мне в одном проекте очень понравилось использовать AngularLight — view-model databinding и ничего лишнего
domix32
07.09.2016 22:02+1С одной стороны iMissYou довольно мил, а с другой — жуткое зло для навигации.
YmNIK_13
07.09.2016 22:27+1Спасибо за подборку. Сохранил закладку, может когда и пригодится.
Недавно нашел вот такую библиотеку для скрол-эффектов, может кому будет интересно ниже презентация ее от автора.
Видеопрезентация
shtepawski
Спасибо за обзор. Есть забавные вещи.
Жаль не нашёл чего-то готового пока а-ля окошко колбэкхантер и иже, с перемещением, например, за курсором и пр.