Создаем стильный 3d слайдер для сайта

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

ДЕМОНСТРАЦИЯ ИСХОДНИКИ

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

Для начала нам необходимо подключить фреймворки и стили CSS, как уже известно, их необходимо разместить между тегами head:

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/buttons.css">
<script type="text/javascript" src="js/modernizr.custom.13303.js"></script>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.slicebox.min.js"></script>

Затем создаем разметку для изображений, которая имеет следующий вид:

<div id="sb-slider" class="sb-slider">
				<img src="images/1.jpg" title="Описание картинки"/>
				<img src="images/2.jpg" title="Описание картинки"/>
				<img src="images/3.jpg" title="Описание картинки"/>
				<img src="images/4.jpg" title="Описание картинки"/>
				<img src="images/5.jpg" title="Описание картинки"/>
				<img src="images/6.jpg" title="Описание картинки"/>
				<img src="images/7.jpg" title="Описание картинки"/>
</div>

</div>

После этого вызываем сам плагин:

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

1	$('#sb-slider').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
// Интервал показа слайдов в сладшоу.<br>

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

// Интервал показа слайдов в сладшоу.<br>

В стилях CSS Вы сможете отредактировать цветовую гамму, позиционирование и многое другое, некоторые стили CSS приведены исключительно для демонстрации.

CSS, JQuery, Плагины, Ротатор контента

Опубликовал Cooper 03.09.2011 в 16:58, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены.