Lecaw

Учимся создавать Web-сайты

Чувствительная анимированная сетка изображений при помощи jQuery плагинов

August 19, 2012 325hits
 
 

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

 Исходные данныеДЕМО

 

 

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

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

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

  • jQuery Transit для большинства переходов CSS
  • Modernizr для того, чтобы проверить поддержку свойств браузером

Структура 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>

Чтобы вызвать jQuery плагин, просто сделайте:

<p>$(function() {<br>
<br>
$( '#ri-grid' ).gridrotator();</p>
<p>});</p>

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

Опции

Доступны следующие опции:

// число строк
rows : 4, // число столбцов
columns : 10, // строки/столбцы для различной ширины экрана
// 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
}, // шаг: число элементов, которые заменяются одновременно
// random || [some number]
// примечание: для проблем связанных с производительностью число меняющихся картинок не должно превышать > options.maxStep
step : 'random',
maxStep : 3, // блокировка нажатий пользователем
preventClick : true, // тип анимации
// showHide || fadeInOut || slideLeft ||
// slideRight || slideTop || slideBottom ||
// rotateLeft || rotateRight || rotateTop ||
// rotateBottom || scale || rotate3d ||
// rotateLeftScale || rotateRightScale ||
// rotateTopScale || rotateBottomScale || random
animType : 'random', // скорость анимации
animSpeed : 500, // анимация easings
animEasingOut : 'linear',
animEasingIn : 'linear', // колличество картинок, которые будут заменяться каждые 3 секунды
// примечание: для проблем связанных с производительностью время "не может" превышать < 300 ms
interval : 3000

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

Проверьте эти три демонстрационных примера с различными конфигурациями:

Надеюсь Вам понравится эта статья. Удачи!

 
 
 

Дополнительная информация

RATTING:
(0 голосов)

Медиа