15 отзывчивых модулей для интерфейсов на jQuery

С тех пор, как отзывчивый дизайн стал обязательным для сайтов, возникает всё больше вопросов по дизайну пользовательского интерфейса. В данной статье предложено 15 новых модулей на jQuery, улучшающих опыт пребывания пользователя на сайте со смартфона, планшета или обычного компьютера.





Пользовательские интерфейсы

MultiScroll

MultiScroll является мощным модулем на jQuery. Позволяет создавать переход между экранами путём разделения их пополам по вертикали. Этот эффект работает не только во всех современных браузерах, — даже в IE8 — но и совместим с мобильными устройствами, позволяя вам использовать данный эффект и в отзывчивой версии сайта.

TourTip

TourTip — это интерактивный гид по элементам сайта. Вместо засорения интерфейса сайта статичными вспомогательными или информационными сообщениями, добавьте TourTip и позвольте посетителям вашего сайта узнать о его новых функциях. Этот модуль подойдёт для презентационного сайта, посадочной страницы нового товара или сервиса. Со своим интуитивным интерфейсом TourTip делает задачу разъяснения предельно простой.

Многие параметры данного модуля можно настраивать под свои нужды.

jQueryTiltedPageScroll

Данный модуль позволяет создать 3D-эффект прокрутки страницы. Эффект простой, но он может добавить шарма вашему блогу или сайту-портфолио. Совместим с современными браузерами, кроме Internet Explorer’а.

jQueryTipCards

jQUery Tip Cards позволяет создавать раскладку двусторонних карточек, которые пользователь может переворачивать. Идея показалась интересной и была реализована в проекте «Tips» компанией Google. Вы можете использовать данный модуль в различных случаях, таких как отображение свежих постов в блоге, новых элементов в портфолио, браузерных играх и т.д.

Slinky.js

Slinky.js создаёт прокручиваемую навигацию с заголовками, собирающимися в стопку. Этот эффект удобен для одностраничных сайтов, просматриваемых на мобильных устройствах. Из-за своего размера — около 1 Кб — модуль создаёт плавный и приятный опыт пользователя. Совместим с последними версиями ваших любимых браузеров.

GoalProgress

GoalProgress позволяет вам создать анимированный индикатор выполнения вашей задачи с помощью jQuery. Задайте данные, и модуль рассчитает прогресс вашей цели и выведет его с помощью анимации. Также можно задать текст перед и после индикатора. Удобен для сайтов, посвящённых сбору пожертвований.

Формы и поля ввода

Card

Если вы работаете над сайтом электронной коммерции, этот небольшой модуль — то, что вам нужно. С помощью одной строки кода вы можете получить от пользователя данные о его карте.

Unibox

Unibox —модуль, добавляющий в обычную строку поиска вывод подсказок (предположений того, что мог искать пользователь). Содержимое может быть разным — от ссылок до изображений.

Vanillabox

Vanillabox —простой, но современный модуль вывода чего-либо в модальных окнах. У него минималистичный дизайн, корректно отображаемый современными браузерами. Он лёгок и с прост в установке.

Медиа

ToneDenPlayer

ToneDen — настраиваемый модуль аудиоплейера для вашего профиля SoundCloud.

PizzaPieCharts

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

Навигация

FlySideMenu

Если вы хотите создать меню, как на сайте AirBnB.com, то этот модуль так и делает. Он бесплатен и совместим с современными браузерами и мобильными устройствами.

Hashtabber

Hashtabber — простой модуль на JavaScript для отображения контента в закладках. Настраиваемый, идёт с несколькими темами.

Headhesive.js

Headhesive прикрепляет шапку сайта к верхней грани окна при прокрутке экрана вниз. Просто задайте параметр - в каком месте вы хотите зафиксировать баннер, и всё!

Anchorific.js

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

ПО материалам сайта designmodo.com





Автор: Перевод: Константин Войцеховский


Нужны деньги до зарплаты?

более 30 сервисов

Кредиты онлайн на карту за 15 минут

от 0,01%

ставка

до 180 дней

макс срок

до 20 000 грн.

макс сумма




Забавное видео

В 2 года родители купили малышу баскетбольное кольцо. Посмотрите как научился бросать этот малыш через 2,5 года!