Вы здесь: Главная » jQuery » 16 бриллиантовых плагинов jQuery

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

01. Round Slider

round-slider

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

02. jInvertScroll

jinvertscroll

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

03. Slinky

slinky

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

04. TwentyTwenty

twenty-twentyInstead of placing two images side-by-side to show the differences between them, you can use this plugin which places one on top of the other. Users drag a slider so that the bottom image shows through, enabling them to see what has changed in a before-and-after situation.

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

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

05. Material design hierarchical display

material-design

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

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

06. Tabslet

tabslet

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

07. Readable

readable

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

08. nanoGALLERY

 

nano-gallery

 

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

09. Tooltipster

tooltipster

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

10. Magnific Popup

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.0

11. Slick - slider

slick-slider

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

slick-slider-responsive

12. Avgrund Modal

avgrund-modal

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

13. jQuery Knob

jquery-knob

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

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

14. Typeahead.js


typeahead

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

15. Lettering.js

lettering

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

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

16. FitText

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, чтобы обеспечить подгонку стиля каждого символа.
Источник

Финансы и их функции. Финансовые отношения. http://finansday.com/ — Резервные финансы и инвестиции.

11 комментариев

  1. Меня заинтересовал плагин, показывающий разные картинки друг под другом. Можно о нем поподробней?

  2. Спасибо. Классная подборка.
    А отдельно про галереи на jQuery нет?

    • К сожалению, пока нет. Возможно, в ближайшем будущем появится.

  3. Здорово! А продолжение подборок будет?

  4. А с плагинами для текста живые примеры можно?

  5. Очень интересуют плагины с прокруткой экрана при скроллинге.
    Будет статья на эту тему?

    • Да, она есть в планах. Можете попробовать самостоятельно разобраться в одном из них - pagepilling.js

  6. Мне интересно, а есть ли плагин, который позволяет сворачивать-разворачивать какой-либо блок?

    • Есть даже не плагин, а стандартные методы jQuery:
      $('селектор').slideDown(400) - разворачивает блок;
      $('селектор').slideUp(400) - сворачивает блок;
      $('селектор').slideToggle(400) - делает либо первое, либо второе в зависимости от того, свернут блок или нет.

  7. Спасибо. Интересная подборка плагинов.

  8. А разобрать применение какого-нибудь плагина с примерами можете?

Обсуждение закрыто