Скрипты jquery для сайта: jquery » Скрипты для сайтов

jquery » Скрипты для сайтов

Новогодняя мотня от Яндекса 2.1

Елочные шарики, которые двигаются при наведении на них мышкой, а ещё издают звук. Новая версия 2.1! Специально от pcvector.net. Удален flash. Переписан jаvascript. Всех с наступающим Новым годом!

Tabulous — плагин вкладок, табов

Tabulous — представляет собой плагин для реализации у себя на сайте блока с вкладками с различными эффектами переключения самих вкладок.

ZooMove — масштабирование изображений

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

PgwSlider — адаптивный слайдер

Адаптивный слайдер с небольшим весом минифицированных файлов. Заявлена поддержка всех десктопных и мобильных браузеров. SEO совместимый.

Слайдер с parallax эффектом

Полноэкранный слайдер с возможностью перетаскивания слайдов (drag) и parallax эффектом.

Блоки одинаковой высоты — jquery.matchHeight

  matchHeight позволяет все выбранные элементы сделать одинаковой высоты.

Scrollify — ускоритель прокрутки колёсика мыши

Scrollify — ускоритель прокрутки колёсика мыши. jQuery плагин, который помогает быстро и плавно переместиться к нужному разделу или секции страницы. Настраиваемый и оптимизированный для touch устройств.

UniteGallery — многофункциональная адаптивная галерея

Unite Gallery — многофункциональная галерея для вывода изображений, музыки, видео. Галерея адаптивная с поддержкой touch устройств.

Вертикальное accordion меню

Вертикальное многоуровневое меню типа аккордеон, раскрывающееся по клику на стрелке.  

Flat accordion menu — вертикальный аккордеон

Вертикальное раскрывающееся меню типа аккордеон в стиле flat design. Простое в понимании и стилизации.

Адаптивные вкладки на jQuery

Несколько строк кода на jQuery + один CSS файл и отличные адаптивные вкладки готовы. Внешний вид полностью настраивается стилями. При уменьшении размера окна браузера до заданного в @media{} вкладки из горизонтальных преобразуются в вертикальный аккордион.

Selectric — пользовательский select

Быстрый, простой и легкий jquery плагин позволяющий оформить html тег select в том стиле, который пришел на ум вашему дизайнеру.

Популярные статьи

Реклама

Опрос

В редакторе кода я предпочитаю тему оформления

Темную

Светлую

Новости

Подпишись

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

Разное

Реклама

Свежие статьи

10 jQuery скриптов для улучшения интерфейса / Хабр

С рассветом WEB 2.0 получили развитие и javascript фрэймворки, позволяющие вебмастеру делать динамические элементы сайта гораздо быстрее и проще. Одним из таких фреймворков является jQuery, получивший огромную популярность за свою простоту и невероятно малый вес. Итак, представляю вашему вниманию 10 наиболее полезных скриптов jQuery для улучшения интерфейса вашего сайта.

Thickbox
Описание: Нужен для обращения внимания пользователя на какой-либо текст, изображение или веб-форму через модальное окно.
Когда и где используется: Когда надо отобразить пользователю больше информации, показать увеличенное изображение, задать несколько вопросов веб-формой, либо отобразить форму входа, но при этом не хотите, чтоб пользователь покидал страницу.
Скрипт, пример, документация
Плагин к WordPress

Tabulations
Описание: Позволяет отображать содержимое страницы в табах.
Когда и где используется: Когда вы хотите освободить место на экране, предоставив быстрый доступ к скрытой информации. Часто используется в виджетах к различным премиум темам WordPress.
Скрипт, пример, документация
Плагин к WordPress

Coda slider
Описание: Создает слайдер, как на скриншоте с сайта Coda.
Когда и где используется: Как и в случае с Coda`ой, этот скрипт отлично подходит для представления продуктов или сервисов, сгруппированными по разделам. Пользователи получают возможность быстрого обзора, а также интуитивно понятную навигацию.
Скрипт, пример, документация
Тема к WordPress

Galleria
Описание: Galleria – javascript галерея, написанная в jQuery. Загружает изображения одно за другим и отображает к ним эскизы.
Когда и где используется: Чтобы показать фотографии какого-либо события или продукта, например.
Скрипт, пример, документация

jTip
Описание: Подсказки, реализованные в jQuery.
Когда и где используется: Когда требуется дать больше информации об объекте в контексте статьи или реализовать подсказки пользователю в различных веб-формах.
Скрипт, пример, документация
Плагин к WordPress

Stylesheet switcher
Описание: Позволяет посетителям на вашем сайте самостоятельно менять стили оформления «в один клик».
Когда и где используется: Когда вы хотите позволить пользователю выбирать шрифты различного размера, отображать информацию, оформленную для мобильного телефона либо для вывода на печать, позволить ему настраивать цвета. Stylesheet switcher может реально помочь повысить удобство вашего сайта.
Скрипт, пример, документация
Плагин к WordPress

jQuery Accordion menu
Описание: Позволяет создавать динамические меню.
Скрипт, пример, документация
Плагин к WordPress

Slider Gallery
Описание: Представляет продукты/изображения в виде прокручиваемой галереи.
Когда и где используется: Когда вы хотите уместить все элементы в сайдбаре, но не хватает места под все опции.
Скрипт, пример, документация

Form Validation
Описание: Проверяйте веб-формы при помощи Form Validation, чтобы избежать неверно заполненных полей.
Когда и где используется: В большинстве форм. Это помогает пользователям понять, где именно они неверно заполнили поля, подсвечивая их ошибки.
Скрипт, пример, документация

jGrowl
Описание: Выводит сообщения в браузере также, как Growl в MacOSX
Когда и где используется: Если вы сообщаете пользователю о действии, но не хотите чтоб он покидал текущую страницу/обновлял ее. Это отличный способ подтвердить действия выполненные пользователем, например регистрация. Также можно использовать jGrowl в различных магазинах и т.п. для подтверждения добавления товара в корзину или подтверждения транзакции.
Скрипт, пример, документация

20 отличных скриптов jQuery для веб-дизайнеров

Работа с Javascript и jQuery всегда была проблемой для веб-дизайнеров, но благодаря развивающимся технологиям, которые представили плагины JS, с помощью которых создание оригинального и привлекательного эргономичного сайта стало намного проще.

Ниже приведены 20 отличных плагинов jQuery Scripts, которые, как правило, очень просты в реализации. Для вашего удобства он разделен на несколько категорий, таких как плагины для слайдеров, меню, параллакс и т. д. Давайте посмотрим!

Плагины для слайдеров

1. ResponsiveSlides.js

ResponsiveSlides.js — адаптивный плагин для слайдера размером менее 1 КБ.

2. Flexisel

Flexisel — еще один замечательный адаптивный плагин для слайдера.

Плагины для сайтов с эффектами прокрутки и/или параллакса

3. Fullpage.js

Fullpage.js — это простой в использовании плагин для создания веб-сайтов в полноэкранном режиме.

4. Parallax.js

Parallax.js — мощный и относительно простой в реализации плагин, позволяющий легко воссоздать эффект параллакса.

5. Путь прокрутки jQuery

Путь прокрутки jQuery — это плагин, который позволяет вам определять собственные пути прокрутки.

Плагины лайтбокса и слайд-шоу для галерей

6. Галерея миниатюр

Галерея миниатюр открывается и расширяется по щелчку.

7. Least.js

Least.js — еще одна галерея изображений, основанная на принципе, близком к вышестоящему.

8. Magnific Popup

Magnific Popup — это адаптивный плагин лайтбокса jQuery, ориентированный на производительность и обеспечивающий наилучшее взаимодействие с пользователем на любом устройстве.

9. Swipebox

Swipebox — оптимизированный лайтбокс для компьютеров, планшетов и мобильных устройств.

10. MultidDialog

MultiDialog использует виджет jQuery UI Dialog для лайтбокса со всеми необходимыми функциями.

Плагины для всплывающих подсказок (подсказки)

11. qTip2

qTip2 — самый полный плагин jQuery и самый мощный для создания всплывающих подсказок.

12. Powertip

Powertip, как следует из названия, является мощным плагином всплывающей подсказки.

Плагины для настройки элементов взаимодействия и эргономики

13. Dropdown.dot.js

Dropdown.dot.js предназначен для гибкости выпадающих меню.

14. Pickadate.

js

Pickadate.js — это легкий подключаемый модуль jQuery для средства выбора даты, адаптивный и подходящий для мобильных устройств.

15. Perfect-Scrollbar

Perfect-Scrollbar, как следует из названия, идеально подходит для полос прокрутки.

Плагин для построения графиков

16. Morris.js

Morris.js — очень хороший плагин для построения графиков.

Плагины для меню навигации

17. Smint

Smint хорош для меню, которое меняется с помощью липкой прокрутки, и идеален для одностраничного сайта.

18. FlexNav

FlexNav — это плагин, который позволяет создавать меню, предназначенные для защиты от любых носителей.

Плагины для динамического макета в многоколоночной сетке

19. jQuery Nested

jQuery Nested — это мощный динамический плагин макета в многоколоночной сетке с максимальной оптимизацией пространства.

20. jResponsiveM

jResponsive для мягких и элегантных переходов.

Об авторе

Сабина Хона

22 великолепных плагина jQuery | Креативный блок

(Изображение предоставлено Тимом Арбаевым через iStock/Getty Images Plus)

Для библиотеки jQuery были написаны десятки тысяч плагинов jQuery, и они могут сэкономить много времени и усилий, когда дело доходит до добавления функциональности веб-сайтам. Библиотека jQuery, созданная в 2006 году Джоном Резигом, является одной из самых популярных библиотек JavaScript и фантастическим ресурсом для быстрой разработки взаимодействий с пользователем.

От галерей изображений или форм до раскрывающей содержимое CSS-анимации или эффекта взрыва — библиотека предоставляет основные строительные блоки, позволяющие быстро создавать прототипы и создавать уникальный пользовательский интерфейс с минимальными затратами кода и усилий. Однако нет необходимости изобретать велосипед каждый раз, когда вы хотите создать немного общей функциональности. Использование плагинов jQuery может сэкономить вам еще больше времени и усилий, и многие из них бесплатны.

Дополнительные полезные ресурсы по веб-дизайну см. в нашем списке лучших инструментов веб-дизайна, лучших API-интерфейсов JavaScript и подборке лучших фреймворков JavaScript. А пока вот наш список полезных плагинов jQuery.

22 великолепных плагина jQuery

Добавьте поддержку социального чата на свой сайт с помощью этого простого в использовании плагина (Изображение предоставлено: CzMMedia)

• Загрузите здесь jQuery, вы можете быстро добавить поддержку неограниченного количества учетных записей социальных сетей, включая Whatsapp, Messenger, Skype, Twitter, Telegram и Instagram. Его легко настроить, и вы можете настроить кнопки по своему усмотрению. В отличие от большинства плагинов в этом списке, этот платный. Загрузка обойдется вам в 14 долларов.

  02. RTO+P Video Player

  Создайте свой собственный видеоплеер, а не полагайтесь на вставки YouTube (Изображение предоставлено RTO+P)
  • Загрузите здесь (откроется в новой вкладке)

  Конечно, это просто для встраивания видео непосредственно с YouTube или другой платформы, но если вы хотите немного больше контроля над своим видео, RTO+P Video Player просто необходим. Этот плагин jQuery позволяет легко создавать и настраивать собственный видеоплеер, беря видео либо с вашего собственного сервера или CDN, либо из общедоступного потока Vimeo. Используйте тег видео HTML5, чтобы упростить жизнь, или для повышения производительности вы можете использовать опцию отложенной загрузки.

  03. Slick

  Какая бы карусель вам ни понадобилась, сделайте ее с помощью Slick (Изображение предоставлено Кеном Уилером)
  • Загрузите здесь (откроется в новой вкладке)

  Это последняя карусель, которая вам понадобится? Просто может быть. Slick — это плагин jQuery, который предлагает полностью адаптивные карусели практически в любой форме, которую вы можете пожелать. Есть всевозможные варианты, включая ленивую загрузку, автозапуск, обратные вызовы и многое другое.

  04. Муури

  Гибкие макеты Muuri реагируют, сортируются, фильтруются и перетаскиваются
  • Загрузите здесь (открывается в новой вкладке)

  Плагин jQuery с открытым исходным кодом от Niklas Rämö Muuri — один из лучших для создания гибких макетов. Его система компоновки позволяет размещать элементы сетки разных размеров внутри контейнера практически любым мыслимым способом — и она адаптивна, сортируется, фильтруется и перетаскивается. Его опция по умолчанию упорядочивает все «по размеру», но вы можете добавить свой собственный алгоритм компоновки для другого стиля.

  05. Timeline.js

  Timeline делает именно то, что написано на упаковке, создавая ползунок временной шкалы
  • Скачать здесь карусельная временная шкала — то есть ползунок, который продвигается на основе хронологических точек). Благодаря множеству визуальных и функциональных возможностей настройки, этот плагин jQuery предлагает поворот в компоненте карусели и очень прост в использовании благодаря подробным инструкциям.

    06. Наклонная прокрутка страницы

    Наклонная прокрутка страницы добавляет аккуратный 3D-эффект к вашим страницам
    • Скачать здесь (открывается в новой вкладке)

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

    07. Focuspoint

    Попрощайтесь с плохо обрезанными адаптивными изображениями
    • Скачать здесь (откроется в новой вкладке)

    Адаптивный веб-дизайн означает, что мы можем создать одну страницу, чтобы она хорошо выглядела на любом устройстве. Однако, если ваш сайт автоматически обрезает изображения, чтобы они соответствовали определенным окнам просмотра, он часто может потерять фокус. Focuspoint может гарантировать, что ваше изображение будет отлично смотреться в любом контейнере, позволяя указать точку фокусировки для каждого изображения. Плагин обеспечит сохранение важных битов при обрезке изображения.

    08. SVGMagic

    SVGMagic создает PNG для замены SVG, где они не поддерживаются
    • Загрузите здесь (открывается в новой вкладке)

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

    09. Распознавание лиц

    Этот плагин обеспечивает простой способ использования некоторых мощных технологий
    • Загрузите здесь (откроется в новой вкладке)

    Этот плагин jQuery упрощает использование некоторых мощных технологий, обнаруживая и предоставляя координаты человеческих лиц на изображениях, видео и холстах. Плагин, написанный Джеем Сальватом, использует алгоритм распознавания лиц Лю Лю.

    10. Круглый слайдер

    Тема слайдера может соответствовать вашим целям
    • Скачать здесь (откроется в новой вкладке)

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

    Получите эффект параллакса с легкостью
    • Загрузите здесь (откроется в новой вкладке)

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

    Дизайн меню, который никогда не выйдет из моды?
    • Загрузить здесь (открывается в новой вкладке)

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

    13. TwentyTwenty

    Плагин ZURB позволяет сравнить два изображения
    • Скачать здесь (откроется в новой вкладке)

    Вместо размещения двух изображений рядом, чтобы показать разницу между снимками до и после, вы можете использовать плагин ZURB TwentyTwenty, чтобы разместить одно поверх другого. Пользователь перетаскивает ползунок так, чтобы нижнее изображение просвечивало через верхнее, позволяя ему увидеть, что изменилось.

    Анимация может помочь направить внимание пользователя
    • Скачать здесь (откроется в новой вкладке)

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

    15. Tabslet

    Минималистский дизайн вкладок с помощью Tabslet
    • Скачать здесь (открывается в новой вкладке)

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

    16. nanogallery2

    Полнофункциональная и быстрая галерея изображений
    • Загрузить здесь (откроется в новой вкладке)

    Разработанная для упрощения галерей изображений, nanogallery2 предлагает многоуровневую навигацию в альбомах, лайтбоксы, комбинированные эффекты наведения на миниатюры, слайд-шоу, полноэкранный режим, нумерацию страниц и отложенную загрузку изображений. Он сенсорный, отзывчивый, быстрый и поддерживает облачное хранилище. Версия 2 предлагает улучшенный пользовательский интерфейс и новые функции, такие как фильтрация по ключевым словам, корзина покупок, обмен в социальных сетях, расширенные эффекты наведения, переходы между миниатюрами и информационная страница с местоположением на Google Maps.

    17. Tooltipster

    Необычные всплывающие подсказки с помощью Tooltipster
    • Скачать здесь (открывается в новой вкладке)

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

    Быстрый и легкий лайтбокс
    • Скачать здесь (открывается в новой вкладке)

    Этот плагин лайтбокса для jQuery ориентирован на то, чтобы быть максимально легким и совместимым. Разработчик сосредоточился на производительности и взаимодействии с пользователем, поэтому он не обладает всеми функциями некоторых плагинов для лайтбоксов, но он очень быстрый и безошибочно работает на огромном диапазоне устройств, включая устройства с высоким разрешением (Retina), такие как MacBook. Про.

    19. Ручка jQuery

    Сенсорные циферблаты, которые также работают на рабочем столе
    • Загрузите здесь (откроется в новой вкладке)

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

    20. Typeahead.js

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

      21. Lettering.js

      Получите точный контроль над вашим шрифтом
      • Загрузите здесь (откроется в новой вкладке)

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