—»     —»   Анимированная адаптивная сетка изображений
  Раздел: Руководства   Комментариев: 1  

Анимированная адаптивная сетка изображений



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

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

Анимированная адаптивная сетка изображений

Мы воспользуемся следующими дополнительными jQuery-плагинами:

* jQuery Transit для большинства CSS-переходов
* Modernizr для проверки браузерной поддержки соответствующих CSS-параметров

Красивые изображения в данном руководстве были представлены Шерманом Геронимо-Таном (Sherman Geronimo-Tan), и распространяются они под лицензионным соглашением Creative Commons Attribution 2.0 Generic (CC BY 2.0).

HTML-структура будет включать простой неупорядоченный список с анкорными элементами и изображениями:

<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
<ul>
<li><a href="#"><img src="images/medium/1.jpg" alt="Whatever works"/></a></li>
<li><a href="#"><img src="images/medium/2.jpg" alt="Anything else"/></a></li>
<!-- ... -->
</ul>
</div>

Для того чтобы вызвать плагин, просто используйте:

$(function() {

$( '#ri-grid' ).gridrotator();

});

Не забудьте включить другие необходимые скрипты.

Опции

// number of rows
rows : 4,

// number of columns
columns : 10,

// rows/columns for different screen widths
// i.e. w768 is for screens smaller than 768 pixels
w1024 : {
rows : 3,
columns : 8
},

w768 : {
rows : 3,
columns : 7
},

w480 : {
rows : 3,
columns : 5
},

w320 : {
rows : 2,
columns : 4
},

w240 : {
rows : 2,
columns : 3
},

// step: number of items that are replaced at the same time
// random || [some number]
// note: for performance issues, the number should not be > options.maxStep
step : 'random',
maxStep : 3,

// prevent user to click the items
preventClick : true,

// animation type
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType : 'random',

// animation speed
animSpeed : 500,

// animation easings
animEasingOut : 'linear',
animEasingIn : 'linear',

// the item(s) will be replaced every 3 seconds
// note: for performance issues, the time "can't" be < 300 ms
interval : 3000

При определении размера сетки вам следует учитывать тот факт, что в сетке у вас будет меньше изображений, чем вы помещаете в список. Давайте предположим, что у вас будет 50 изображений в списке и будут определено 5 колонок и 4 строки. Таким образом, мы получим сетку с 20 изображениями и возможностью переключиться на оставшиеся 30.

Ознакомьтесь с этими демо-файлами с тремя разными конфигурациями:

* Демо 1: Случайные анимации / 55% ширины контейнера / 3 секунды между переключениями
* Демо 2: Анимация fadeInOut / 100% ширины контейнера / переключение 1 изображения за раз / 600 миллисекунд между переключением
* Демо 3: Случайные анимации / 100% ширины контейнера / переключаем максимум 2 изображения за раз / 2 секунды между переключением

Благодарим Джесси Чейза за предоставленную нам идею и вдохновение.

Надеемся, что данное руководство окажется вам полезным.

Посмотреть демо | Скачать исходные файлы
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, адаптивный дизайн
Опубликовал Design FactoRy   Прочитано (раз): 9867   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 26 февраля 2014 @ 10:54
Написал: Aterr — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Спасибо за статью, очень познавательно :)
В свою очередь хочу поделиться другим решением, которое работает без библиотеки jQuery. Не так давно, пытаясь найти подходящее решение для реализации адаптивной сетки, наткнулся на одну статью, в которой рассказывается как добиться адаптивной сетки при помощи text-align: justify. Статью я перевел и опубликовал в своем блоге.
Ссылку вбрасываю, может кому из ваших читателей пригодится, а может и вам самим :)
http://aterr.net/adaptivnaya-setka-pri-pomoshhi-vy
ravnivaniya-text-align-justify
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Вирусстопер ecom air mask
вирусстопер ecom air mask
grippanet.net
Кабель ввг
Кабель ВВГ! Комплексные поставки кабеля различного назначения! Звони
garantenergo59.ru
Кальянная москва сити
кальянная москва сити
nebo-lounge.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2018    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
2728293031