Анимированная быстро реагирующая (responsive) сетка изображений

Анимированная быстро реагирующая (responsive) сетка изображений
jQuery плагин для создания быстро реагирующей (responsive) сетки изображений, которая будет переключать изображения, используя различные анимации и синхронизации. Можно использовать, например, как фон или декоративный элемент веб-сайта, так как мы можем рандомизировать появление новых изображений и их переходы.
Идея состоит в том, чтобы имея список изображений и заданное число столбцов и строк, расположить изображения в виде сетку. Остающиеся изображения появятся с различными анимациями и задержками. Настраивая некоторые опции мы можем определить, как сетка должна быть размечена на различных ширине экрана.

Используются следующие дополнительные jQuery плагины:
jQuery Transit для большинства CSS переходов (transitions).
Modernizr для того, чтобы проверить поддержку браузером CSS свойств.

Структура HTML

Просто неупорядоченный список с якорями и изображениями:
<div id="ri-grid" class="ri-grid ri-grid-size-1 ri-shadow">
    <ul>
        <li><a href="#"><img src="images/medium/1.jpg" /></a></li>
        <li><a href="#"><img src="images/medium/2.jpg"       alt="Анимированная быстро реагирующая (responsive) сетка изображений" title="Анимированная быстро реагирующая (responsive) сетка изображений" /></a></li>
        <!-- ... -->
    </ul>
</div>

Для запуска плагина, просто выполните следующий скрипт:
$(function() {
             
    $( '#ri-grid' ).gridrotator();
 
});


ОПЦИИ

Доступны следующие опции:
// number of rows
rows            : 4,
 
// количество колонок
columns         : 10,
 
// строки/столбцы для различных экранных ширин
// т.е. w768 для экранов меньше 768 пикселей
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
},
 
//шаг: число элементов, которые будет заменены одновременно
//random || [число]
//примечание: для проблем производительности число не должно быть > options.maxStep
step            : 'random',
maxStep         : 3,
 
// prevent user to click the items
// предотвращение кликов пользователя элементам
preventClick    : true,
 
// варианты анимации
// 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',

// интервал замены элементов каждые 3 секунды
// примечание: для проблем производительности время не может быть < 300 ms
interval        : 3000

При определении размера сетки нужно иметь в виду, что в сетке будет показано меньше изображений, чем, фактически есть в списке. Например, список 50 изображений и определено 5 столбцов и 4 строки. Это создаст сетку с 20 изображениями и с 30 оставленными «за кадром», которые будут переключены плагином согласно настройкам.

Проверьте эти три демонстрационных примера с различными конфигурациями:
Демо 1: Случайная анимация/ ширина контейнера 55%-ая/3с между переключением

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

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

0 комментариев

Оставить комментарий