Плагин jQuery - Slicebox

C помощью 3D трансформаций CSS3 можно создавать замечательные эффекты преобразования элементов в пространстве. Плагин Slicebox использует 3D трансформации для смены слайдов в галерее. Основная идея заключается в создании 3D слоев, которые затем вращаются, открывая следующее изображение в качестве другой стороны объемного объекта. В случае использования браузера, который не поддерживает 3D трансформации слайдер будет просто сдвигать изображения.

Плагин Slicebox

Обратите внимание, что 3D эффекты будут выводиться только в поддерживающих 3D трансформации CSS3 браузерах  (в настоящий момент - это Chrome и Safari).

В демонстрации использованы изображения фотографа Rick Harris.

 

Использование плагина

Помещаем все изображения в контейнер с классом sb-slider:

<div id="sb-slider" class="sb-slider">
	<img src="images/1.jpg" title="Creative Lifesaver"/>
	<img src="images/2.jpg" title="Honest Entertainer"/>
	<img src="images/3.jpg" title="Brave Astronaut"/>
	<img src="images/4.jpg" title="Affectionate Decision Maker"/>
	<img src="images/5.jpg" title="Faithful Investor"/>
	<img src="images/6.jpg" title="Groundbreaking Artist"/>
	<img src="images/7.jpg" title="Selfless Philantropist"/>
</div>

А затем вызываем плагин:

$('#sb-slider').slicebox();

 

Опции плагина

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

orientation			: 'v',
// ориентация (v)вертикально или (h)горизонтально.

perspective			: 1200,
// значение свойства -webkit-perspective.

slicesCount			: 1,
// число слоев нарезки, нужно нечетное число между 1 и 15
// (если вам нужно увеличить верхний предел, используйте функцию _validate).

disperseFactor		: 0,
// Каждый слой будет смещаться на x px по горизонтали / вертикали (в зависимости от ориентации).
// Средний слой не двигается.

colorHiddenSides	: '#222',
// Цвет скрытых сторон.

sequentialRotation	: false,
// Анимация запускается слева-направо.
// Самый левый слой будет вращаться первым.

sequentialFactor	: 0,
// Если опция sequentialRotation имеет значение true, то здесь определяется задержка
// между началом вращения слоев в миллисекундах.

speed3d				: 800,
// Скорость анимации 3D.

speed				: 600,
// Скорость анимации при отсутствии 3D трансформаций. 

fallbackEasing		: 'easeOutExpo',
// Эффект перехода при отсутствии 3D трансформаций.

slideshow			: false,
// Автопроигрывание слайдшоу.

slideshowTime		: 2000
// Интервал показа слайдов в сладшоу.
 

Демонстрация

 

 

Авторизоваться и Скачать

5 последних добавленных файлов в рубрике"Скрипты"

^ Наверх ^