—»     —»   Анимированная адаптивная сетка изображений
  Раздел: Руководства   Комментариев: 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   Прочитано (раз): 14843   |   Оставлено комментариев: 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-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Рунетки
рунетки
rus.fapcam.club
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Омг сайт
омг сайт
ru1.1omgomg.net
Эпиляция александритовым лазером
без запаха для обезболивания лазерной эпиляции
laserepil24.ru
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031