Плагин 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 последних добавленных файлов в рубрике"Скрипты"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 16 Сентября 2011 13:17
    Serpanok
    жаль нет кросбраузерности(((
  • 16 Сентября 2011 15:14
    justik
    В хроме не робит, а в сафари красиво)
    • 16 Сентября 2011 18:19
      Jackitos
      В хроме все отлично работает
    • 16 Сентября 2011 20:17
      SergStril
      И у меня в хроме - всё ОК!!!
    • 16 Сентября 2011 23:01
      notbot
      В Хроме - обычный слайдинг...
      • 5 Октября 2011 17:18
        [Brightman]
        ни фига, у меня в 14 хроме все работает как надо
  • 18 Сентября 2011 11:49
    rymaruk
    Вскоре сделаю весь сайт с такими переходами между страницами... Будет действительно кайф)) Спасибо, плагин супер...!!!
  • 19 Сентября 2011 10:59
    NightMS
    в хроме 14 не робит, а в сафари красиво)
    • 4 Октября 2011 23:46
      reset86
      не врите, всё работает.
  • 8 Октября 2011 19:56
    andrewbass
    Скажите, пожалуйста, как сделать что бы по умолчанию листал фото, а не при нажатии "плей".
  • 1 Декабря 2012 20:07
    CanVas
    странное дело. у меня на компе всё робит. а вот на другом - не понятно почему, мозилла пытается нарисовать 3д - и у неё есстественно ничего не выходит. т.е. слайдера нет. а вот хром с самого начала опускает руки и рисует шаблон 2д =(
  • 13 Февраля 2013 20:14
    nkilla
    5 пример больше всего понравился по сравнению с другими, но и остальные тоже отлично смотрятся. В хроме все отлично работает, супер!
  • 20 Февраля 2013 15:36
    greenp1ece
    А можно как нибудь сделать, так что бы был эффект перелистывания рандомный?
  • 18 Апреля 2013 10:08
    m1shg4n
    Не загружает изображения, листает серым. Загружается только первый слайд и потом еще какой ни будь рандомно. Тест в хроме 27/28Canary
  • 18 Октября 2014 17:47
    vajiko
    how make autoplay
  • 16 Марта 2015 02:30
    maxim_storozhenko
    Как сделать эффект перелистывания рандомный?
^ Наверх ^