12 Material Design Jquery плагинов

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов

В этой статье вас ждет подборка плагинов для реализации различных эффектов в стиле material design.
Немного слов о material design. Он призван сделать цифровые объекты реалистичными. Прежде всего material design описывает некоторые правила, которые определяют как объекты должны двигаться и взаимодействовать между собой на экране. Он позволяет сконцентрировать внимание пользователя на контенте и создает ощущение работы с реальным объектом, а не плоскостью дисплея. В material design акцент делается на анимацию объекта с которым работает пользователь, так как он должен наглядно понимать принципы перехода от одного к другому и что за чем должно следовать.
Основные принципы material design:
  • Организованность пространства — слои расположены интуитивно понятно для пользователя, свет и тень помогают увидеть как слои взаимодействуют друг с другом.
  • Адаптивность — на любых устройствах содержимое не меняет своей сути
  • Полиграфический дизайн — использование графики, шрифтов и цветов для понятного отображения информации
  • Осмысленная анимация — слои передвигаются, меняют свою форму и размер уступая пространство для «следующего» интерфейса. Пользователь должен увидеть трансформацию объекта с которым он взаимодействовал.
Теперь конкретнее о нашей подборке. Анимация и различные эффекты в material design реализованы с помощью фреймворка Angular JS. Фрейворк относительно новый и требует изучения. Для тех, кто с ним не знаком, но хочет освежить дизайн сайта в соответствии с последними тенденциями в мире разработки, может сделать базовые эффекты material design с помощью привычного всем jQuery.
Предлагаю перейти к обзору плагинов:

Webapp

Плагин реализует меню с выпадающим списком. Поддерживает адаптивный дизайн и полностью поддерживается сенсорными устройствами. Имеет яркий и современный дизайн.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Material Design Preloader

jQuery плагин, который создает полосу загрузки, подобную прелоадеру входящий сообщений Google.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Paper collapse

Эффект аккордеона в стиле material design, написанный с помощью и JS. При нажатии на строку объект div увеличивается, чтобы вместить в себя описание. Пример можно посмотреть на странице скачивания.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Waves

Плагин делает волновой эффект в месте клика с помощью и JS. Данный эффект можно реализовать при нажатии на кнопку, иконку, блок div, изображение и др.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Google I/O Tabbed Navigation

Плагин на CSS3 и jQuery в стиле material design для создания вкладок навигации с красивым волновым эффектом в месте клика.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Material Refresh

Плагин использует CSS3, библиотеки Zepto и JQuery, осуществляет перезагрузку страницы при перетягивании элемента. Поддерживается только мобильными устройствами. Содержит 3 типа обновления активного контента (Design Refresher).

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Google material design

jQuery плагин, который воссоздает волновой эффект в точке нажатия на кнопку или элемент списка, используя CSS-анимации.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Material Cards

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

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Material Design Stopwatch, Alarm and Timer

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

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Material Inspired Morphing Overlay

Плагин использует CSS3 и JQuery для создании кнопки действия, при нажатии которой происходит морфинг с последующим наложением поверх текущего содержимого.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


Quttons

С помощью этого плагина вы можете скрыть любой объект div позади кнопки и реализовать изменение цвета, формы и размера, чтобы вместить новое содержимое.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов


jQuery Material Design Mobile Menu

Плагин для создания кнопки меню с помощью CSS и jQuery в стиле material design. Также с используется библиотека Transit. По мнению автора, Transit делает переходы и преобразования намного лучше.

jQuery плагины и JavaScript решения: Jquery плагины и решения: 12 Material Design Jquery плагинов
Напишите свой комментарий
comments powered by HyperComments