Главная страница » jQuery » Создаем стильный 3d слайдер для сайта

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

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

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

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

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

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

</div>

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

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>

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