Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. jQuery плагины для респонсив дизайна

jQuery плагины для респонсив дизайна

resize

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

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

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

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

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

JavaScript (в том числе JQuery и другие библиотеки) является наиболее распространенным способом создания такого фреймворка или плагина. Ниже мы рассмотрим несколько таких скриптов для респонсив дизайна.

FREETILE.JS (Свободные плитки)

Freetile.js является достаточно новым плагином jQuery, который позволяет организовать динамичное, организованное, респонсивное построение страницы. Этот плагин доступен как самостоятельный проект с открытым исходным кодом. Использовать этог jQuery плагин достачточно легко даже тем, кто не является профессиональным разраотчиком. Скачать архив с плагином и инструкциями можно по этой ссылке – скачать. Пример использования этого скрипта:

$('#container').freetile({ animate: true, elementDelay: 30 });

В результате получим динамическое расположение элементов в DIV “container” с анимацией и задержкой 30 секунд.

ISOTOPE

Isotope является плагином-сборой всевозможных эффектов, в том числе одним из которых является fluid/responsive расположение обьектов. Также этот плагин позволяет делать бесконечную (infinite) прокрутку элементов, фильтрацию и многое другое. Скачать и посмотреть демо можно по этой ссылке – скачать.

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2025 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Центр рекламных бюджетов". ИНН:5902052888, КПП:590201001, ОГРН: 1195958009730, Пермь, ул. Окулова, д. 75 к. 8 офис 501Б

ООО «Центр рекламных бюджетов» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний