Плагины и руководства – это отличные ресурсы для дизайнеров. С помощью руководств дизайнеры могут учиться чему-то новому, и практиковать полученные навыки, используя инструменты для разработки, а плагины в свою очередь позволяют упростить рабочий процесс. В последнее время jQuery стал практически незаменимым инструментом, учитывая то, какие плагины сегодня доступны, и что с их помощью можно добиться практически любого функционала и эффекта. Среди прочих javascript-фреймворков, jQuery представляет собой самый продуманный и известный, и позволяет вам перенести ваши навыки в разработке на новый уровень. Кроме того, jQuery невероятно просто использовать.Сегодня мы хотим представить вам несколько свежих и бесплатных jQuery-плагинов и полезных руководств. Надеемся, что вам понравится эта подборка и вы найдете применение представленным инструментам и полученным знаниям.
01. Демонстрация приложений с наложением сетки
Руководство, посвященное разработке простого сеточного наложения с небольшим переходом для страницы демонстрации приложения.
02. Сетка миниатюр с увеличением превью-изображения
Руководство о создании сетки миниатюр с эффектом увеличения изображения предварительного просмотра, который можно видеть в разделе Картинок в Google.
03. Миниатюрная система помощи на jQuery
В данном руководстве вас будут учить созданию миниатюрной системы помощи на jQuery. Это будет продуманный виджет, который отображает вспомогательный текст или помогает пользователям познакомиться с веб-приложением. Содержимое виджета можно будет даже искать, а все найденные ключи будут подсвечиваться.
04. jqBar: плагин анимированной панели на jQuery
Это простой jQuery-плагин, предназначенный для создания анимированных вертикальных или горизонтальных панелей. Плагин называется jqBar, и его можно использовать в различных ситуациях, когда вам нужно представить данные в сопровождении визуального эффекта. Это позволит вам создавать красивые столбиковые диаграммы, либо создать строку прогресса. Плагин весит очень немного, и полностью поддается настройке.
05. Диаграммы на jQuery и xCharts для вашего приложения
Создавайте привлекательные графики и диаграммы для вашего приложения при помощи jQuery и xCharts.
06. Слайдер контента на jQuery в стиле iOS
В данном руководстве внимание фокусируется на использовании плагина под названием iosSlider. Это open source проект со множеством опций для оформления собственных слайд-шоу с медиа-контентом. Он включает в себя обычные анимации и эффекты при клике или наведении курсора мыши по элементам слайд-шоу.
07. Разрабатываем «липкую» навигационную шапку сайта при помощи jQuery Waypoints
В этом руководстве мы займемся разработкой навигационной панели, которая всегда остается наверху, даже при прокрутке страницы. Чтобы дополнить эффект, мы также воспользуется парой трюков.
08. Интерактивная инфографика с SVG и CSS-анимацией
Учитесь создавать интерактивные анимированные инфографики при помощи SVG, CSS и javascript.
09. Применяем CSS Clip: расширяющийся эффект наложения
Руководство о создании простого эффекта расширения наложения при помощи свойства CSS clip и CSS-переходов.
Экспериментальное решение, основанное на слайдере переключения страниц с использованием слайдера jQuery UI. Суть заключается в использовании простого концепта навигации, который содержит разметку и стиль, позволяя без труда осуществлять доступ к контенту.
11. Создаем сайт-магазин с поиском, основанным на Google
В данном руководстве мы займемся разработкой простого движка поиска по продукции. Используя jQuery и PHP, мы осуществим привязку к API Shopping Search от Google, и вернем перечень элементов, которые можно купить, в сопровождении информации о цене, фотографиями и т.д.
12. Создаем простой слайдер на несколько элементов
Руководство посвящено разработке простого слайдера категорий с минималистским дизайном с использованием CSS-анимаций и jQuery. Суть заключается в том, чтобы последовательно переключать элементы слайдера в зависимости от направления слайдера.
13. Адаптивный и совместимый с Touch аудиоплеер
jQuery-плагин Audio Player поддерживает управлением посредством touch-устройств, и отлично адаптируется под экраны разных размеров. Он разработан только с использованием CSS-кода, без каких-либо изображений.
14. Calendario: гибкий плагин для создания календаря
jQuery-плагин для создания гибких календарей.
15. Простые эффекты для выпадающих списков
jQuery-плагин для преобразования пунктов меню в выпадающие списки при помощи простых эффектов раскрывания.
16. Разрабатываем ленту новостей с Tumblr в качестве источника
В данном руководстве мы воспользуемся tumblr в качестве системы публикации новостей. Мы создадим простой виджет, который будет просматривать последние записи в блоге Tumblr, и представлять эти записи как новости на вашем сайте. Добавление новостей будет производиться путем создания новых публикаций в вашем Tumblr.
17. Создаем привлекательные шаблоны для страниц «Скоро открытие» при помощи CSS 3D и javascript
Здесь мы займемся разработкой привлекательных шаблонов для страниц из разряда «Скоро открытие» при помощи CSS3, CSS 3d-трансформаций и jQuery. Здесь мы немного разыгрались с CSS3, так что устаревшие версии браузеров вряд ли будут поддерживать нужные эффекты, однако для CSS 3D мы создали отличную запасную версию. Вместо невероятного эффекта переворота, мы ограничимся лишь простым эффектом отображения и скрывания.
18. Raccordion: адаптивный горизонтальный слайдер изображений-гармошка на jQuery
jQuery-плагин Raccordion подойдет в различных случаях, когда вам понадобится слайдер изображений-гармошка, который будет адаптироваться под экраны разных размеров. Это горизонтальный слайдер изображений, который умеет изменяться в зависимости от размеров окна браузера.
19. Трехмерная вращающаяся окружность на CSS3 и jQuery
В данном руководстве мы займемся разработкой окружности с переключателем, которое будет открываться при нажатии по этому переключателю, создавая реалистичный трехмерный эффект переворота. Это будет реализовано при помощи CSS 3D-трансформаций и теней/градиентов.
20. Как создать анимированную папку в стиле Mac OS X при помощи CSS3
В данном руководстве вам будет показан процесс создания папки в стиле Mac OS X при помощи CSS3, с использованием трехмерных трансформаций, градиентов и теней. Вдобавок, здесь также будет использована библиотека jQuery UI и предусмотренные в ней взаимодействия с перетаскиванием.
21. Создаем привлекательный измеритель сложности пароля
Здесь вы научитесь разрабатывать красивый индикатор сложности паролей. Он будет определять уровень сложности пароля и изменять индикатор при помощи нового jQuery-плагина Complexify.
22. TiltShift.js
jQuery-плагин, в котором используются фильтры изображений из CSS3 для воссоздания эффекта тилт-шифт. На данный момент плагин работает только в Chrome и Safari 6.
23. Вертикальный слайдер продукции на jQuery и CSS-переходах
Руководство посвящено разработке адаптивного вертикального и полноэкранного слайдера, который позволяет переходить по разделам в разных направлениях. Здесь будет использоваться jQuery, CSS-переходы и media queries, чтобы сделать структуру адаптивной.
24. Кастомная стилизация выпадающего списка
Руководство посвященное разработке собственных выпадающих списков. Здесь вам будет показано 5 примеров с различными выпадающими меню и списками, предназначенными для разных целей.
25. Креативные стили веб-шрифтов
Здесь мы займемся созданием нескольких интересных эффектов веб-шрифтов при помощи различных CSS-техник и при помощи lettering.js.
26. Превью альбомов на CSS3 и jQuery
Здесь мы займемся разработкой скрипта для предварительного просмотра содержимого альбомов при помощи анимации в стиле слайд-шоу. Этот эффект можно использовать в фото-галереях, онлайн-магазинах, профильных страницах и многом другом. Разработчик был вдохновлен Facebook, где при наведении на альбом можно видеть слайдшоу некоторых фотографий, загруженных в этот альбом.
27. Slicebox Revised
Slicebox представляет собой jQuery-плагин для трехмерного слайдера изображения. В новой версии плагина можно видеть несколько исправлений, а также новые добавленные свойства.
28. Полноэкранный слайд-шоу для видео на Bigvideo.jg
Руководство посвящено созданию полноэкранного видео-фона при помощи Bigvideo.jg – jQuery-плагина для реализации большого фонового видео.
29. Полноэкранная разметка с возможностью переворачивать страницы
Данное руководство посвящено созданию разметки с возможностью перелистывать страницы при помощи BookBlock. Суть заключается в том, чтобы перелистывать контент по тому же принципу, как при чтении книги. А также осуществлять доступ к страницам посредством бокового меню, которое будет выезжать с левой стороны экрана.
30. Адаптивная CSS-хроника с трехмерным эффектом
Руководство о том, как создать экспериментальную хронику с трехмерным эффектом при помощи лишь CSS. Суть заключается в том, чтобы раскрыть область контента при выборе привязанного элемента радио-ввода.
31. Креативные CSS-анимации загрузки
В данном руководстве мы покажем вам, как можно сделать креативные анимации загрузки при помощи лишь кода CSS.
32. Базовые готовые к использованию CSS-стили
Это коллекция базовых стилей, которые могут пригодиться при разработке собственных таблиц стилей. Научитесь создавать удобные классы для простой стилизации элементов, а так же тому, как их применять к элементам.
33. Hexaflip: гибкий плагин с трехмерными кубами
HexaFlip представляет собой javascript ui-плагин, который позволяет вам использовать трехмерные кубы в качестве элементов интерфейса. Окунитесь в процесс разработки плагина, и познакомьтесь с лучшими примерами реализации.
34. Анимированный стек фотографий на CSS3
В данном руководстве мы займемся разработкой анимированной стопки (стека) фотографий, в которой будут использованы различные эффекты переходов между изображениями. Эффекты будут реализованы на чистом коде CSS3, что означает, что они будут отлично работать в современных браузерах и на мобильных устройствах. Мы также реализуем автоматическое перелистывание фотографий, что позволит использовать данный эффект в качестве слайд-шоу.
35. Разрабатываем веб-приложение с фильтрами наподобие Instagram
В данном руководстве вам будет рассказано о том, как можно создать простое веб-приложение, которое позволяет вам перетаскивать фотографии с компьютера в браузер, и применять к ним фильтры наподобие Instagram.