16 бриллиантовых плагинов jQuery

01. Round Slider

Этот круговой слайдер позволяет пользователю выбрать диапазон значений, передвигая мышь по кругу. По умолчанию отображается полный ползунок, но вы также можете использовать его, чтобы получить четверть окружности, полукруглые и круговые формы. В плагине предусмотрены CSS стили, которые можно настроить, выбрав тему, например, чтобы стиль был похожим на спидометр. Изображения не участвуют; это все сделано с помощью CSS и JavaScript.

02. jInvertScroll

jInvertscroll позволяет легко осуществлять горизонтальную прокрутку с эффектом параллакса. Перейдите по ссылке на сайт плагина и прокрутите вниз колесико - горизонтальные блоки с текстом и  два слоя ландшафта будут двигаться с разной скоростью, чтобы создать иллюзию глубины.

03. Slinky

Slinky - это элегантный, классический дизайн меню, которое полезно для любого сайта, в котором у нужно реализовать много подменю. Выберите элемент и анимацию для наведения на различные подпункты меню. Демо смотрим здесь.

04. TwentyTwenty

Отличный плагин, который можно использовать для сравнения двух фотографий с эффектом "до" и "после", например ДО ретуши и после нее. Изображения накладываются друг на друга вместо размещения их рядом.  Пользователь перетаскивает ползунок так, чтобы увидеть,что есть на нижнем изображении по сравнению с верхним.

Интересный эффект получается, если изображения отличаются незначительно - что-то вроде эффекта волны или лупы.

05. Material design hierarchical display

Плагин отлично сочетается с animate.css. Позволяет иерархически отобразить эффекты анимации, чтобы направлять внимание пользователей и вести их от одной точки к другой в процессе показа какого-то блока (логотипа, промо и т.п.). Эта анимация может быть настроена в соответствии с вашим дизайном, и имеет довольно много опций, методов, событий, css-свойств, т.е. сопутствующей документации, чтобы помочь вам создать интересные эффекты.

See the Pen Material Design Hierarchical Display + Animate.css by Sergey Kupletsky (@zavoloklom) on CodePen.

06. Tabslet

Как следует из названия, Tabslet представляет собой легкий плагин для создания вкладок. Он поддерживает следующие / предыдущие элементы управления, автопереход с вкладки на вкладку (rotation), пользовательские события, переходы по ссылкам, анимации и др. Посмотрите на демо, чтобы увидеть,нужен ли вам этот плагин.

07. Readable

Readable помогает убедиться, что ваши текстовые блоки остаются в пределах оптимальных параметров для удобства чтения. Слишком узкий или слишком широкий абзац (или блок текста) делает ваш текст менее читабельным. Там сразу можно посмотреть отличное демо (в правом нижнем углу включается), которое показывает вам изменения, внесенные в текст страницы, чтобы сделать его легче воспринимаемым на глаз.

08. nanoGALLERY

nanoGALLERY предназначен для создания галереи изображений. Благодаря многоуровневой навигации в альбомах, эффектам lightbox, эффектам при наведении на миниатюры, слайд-шоу, возможности использовать полноэкранный режим, пагинацией (постраничный переход), "ленивой" загрузке изображений, использованию разных тем, совместимости с Twitter Bootstrap, возможности настройки переводов и подтягивания изображений из Flickr / Picasa / Google-фотоальбомов эта галерея заняла почетное место среди других .Она имеет обработку сенсорный касаний, отзывчивый (responsive) режим, быстро работает и поддерживает облачные хранилища.

09. Tooltipster

Tooltipster представляет собой современный вариант всплывающих подсказок. Но при этом он поддерживает HTML-код внутри этих подсказок с семантической разметкой с помощью CSS, используемой для управления отображением. Например, можно добавить изображение внутрь подсказки. Можно отображать подсказки с анимацией или подсказки по клику. Есть широкий спектр опций конфигурации, что делает его настраиваемым для любого сценария. Возможна даже загрузка с помощью AJAX.

10. Magnific Popup

Это Lightbox плагин для JQuery, простой и функциональный. Разработчик сконцентрировалась на производительности и использовании user experience (т.е. пользовательского опыта), поэтому он не имеет широких возможности альтернативных плагинов-лайтбоксов, но зато  отлично и супер-быстро работает через огромный спектр устройств, включая высокоскоростные DPI устройства (Retina), такие как MacBook Pro.

Плагин дает возможность отображать в модальном окне отдельное изображение, группу изображений, текст со страницы или загруженный с помощью AJAX, формы, видео с youtube, vimeo или карты с  Google maps. Есть несколько вариантов анимации, которые можно посмотреть ниже.

See the Pen CSS3 animation effects for Magnific Popup by Dmitry Semenov (@dimsemenov) on CodePen.

11. Slick - slider

Этот простой маленький плагин представляет собой слайдер изображений без наворотов. Он предлагает только слайдер, но при этом мало весит и является супер-отзывчивым (responsive). Слайды могут быть вертикальными, горизонтальными, содержать HTML, быть настроены с помощью CSS и есть встроенная поддержка управления с клавиатуры  тоже. Кроме того, вы можете перемещать слайды на телефоне движением руки, а не с помощью точек или стрелок.

Пример слайдеров с отзывами с codepen.io

Автор Mark Sottek

See the Pen Simple Slick Testimonial Slider by Mark Sottek (@mark_sottek) on CodePen.

12. Avgrund Modal

Этот красивый и простой плагин выдает вам модальное окно, размывая содержимое страницы и уводя его вдаль, в Z-пространстве. Очень приятный эффект, фокусирующий внимание на тексте в модельном окне. Ниже смотрим пример.

13. jQuery Knob

jQuery Knob берет элементы ввода и преобразует их в сенсорные циферблаты, которые также работают на рабочем столе. Это отличный пример того, как вы можете адаптировать свой контент в соответствии с новыми парадигмами, и стоит обратить внимание на технический подход, если ничего больше.

Jquery Knob - это возможность отобразить что-либо в виде круговых диаграмм или даже часов. Плагин поддерживает клики мышью, движение колесиком (скроллинг), управление с клавиатуры и с тачскринов. Это отличный пример того, как вы можете адаптировать свой контент в соответствии с новыми трендами. Можно использовать вариант readonly или давать пользователям изменять что-либо динамически.

14. Typeahead.js

Продукт команды разработчиков Twitter, простой в реализации инструмент для создания поиска на сайте, который вытягивает данные из локального или внешнего источника, обеспечивая автоматическое дополнение запроса пользователя.

15. Lettering.js

Lettering.js обеспечивает детальный контроль над отдельными символами в вашем шрифте, что позволяет изменять кернинг, цвета отдельных букв, и применять слушатели событий. Фактически, он разбивает слово или словосочетание на span-ы, содержащие по одному символу. Он также хорошо работает с FitText, что дает вам контроль стиля типографики на сайте.

Ниже можно посмотреть один из примеров использования в дизайне сайта.

16. FitText

This handy plugin allows you to fill your container's width with your type but automatically scaling the text size up or down to suit. Designed to facilitate responsive headlines, the plugin also integrates with Lettering.js to allow for granular per-character styling.

Этот удобный плагин позволяет заполнить ширину контейнера вашим шрифтом таким образом, чтобы автоматически масштабировать размер текста с увеличением или уменьшением для подгонки под размер устройства или блока. Разработанный, чтобы облегчить отзывчивые (responsive) заголовки, плагин также интегрируется с Lettering.js, чтобы обеспечить подгонку стиля каждого символа.
Источник