Анимированная адаптивная галерея

Сегодня мы хотим поделиться с вами 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();
 
});

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

Параметры

Доступны следующие параметры:

 // количество строк
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
},
 
// 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 спрятанными, которые должны будут появляться по время анимации.

Обратите внимание на три демо-примера с различными настройками:

Надеюсь, вам понравилось!

Скачать исходные файлы


Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments