Все для веб-дизайнера
Создаем стильный 3d слайдер для сайта
Красивый слайдер является неотъемлемой частью сайта который имеет широкий выбор изображений. В данном уроке речь пойдет о создании отличного слайдера с помощь 3D трансформаций CSS3. Для этого мы будем использовать плагин Slicebox, который использует 3D трансформации для смены слайдов в галерее. Основная идея заключается в создании 3D слоев, которые затем вращаются, открывая следующее изображение в качестве другой стороны объемного объекта.
В случае использования браузера, который не поддерживает 3D трансформации слайдер будет просто сдвигать изображения. Хотим обратить внимание , что 3D эффекты будут выводиться только в поддерживающих 3D трансформации CSS3 браузерах (в настоящий момент — это Chrome и Safari).
Для начала нам необходимо подключить фреймворки и стили CSS, как уже известно, их необходимо разместить между тегами head:
|
1 2 3 4 5 6 |
<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> |
Затем создаем разметку для изображений, которая имеет следующий вид:
|
1 2 3 4 5 6 7 8 9 |
<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> |
После этого вызываем сам плагин:
|
1 |
$('#sb-slider').slicebox(); |
Теперь давайте рассмотрим некоторые опции плагина:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
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 приведены исключительно для демонстрации.
Интересно:
| Опубликовал admin 03.09.2011 в 16:58, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...