3D слайдер на JQuery

3D слайдер на JQuery

04.07.201217661

Это не простой слайдер, это большая творческая работа, в которой анимация использована максимально, и это не просто передвигающиеся картинки, картинки переворачиваются, исчезают, да и не только картинки. Вы, я уверен, сразу полезли смотреть демо, поэтому не имеет смысла описывать 3D слайдер на JQuery. У слайдера есть переключатель. Наверное, чтобы разобраться во всем представленном коде понадобится поддержка интернет сайтов. Эффекты работают только в последних версиях браузеров Safari, Chrome, Safari Mobile и Firefox (хотя, в последнем это не совсем хорошо).

Пример HTML выглядит следующим образом:

Code
<ul id="sg-panel-container">
  <li data-w="60" data-h="55">
  <img title="Заголовок изображения" src="images/1.jpg" data-rotate-x="50" />
  <img title="Заголовок изображения" src="images/2.jpg" data-rotate-y="-50" />
  <img title="Заголовок изображения" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
  <img title="Заголовок изображения" src="images/4.jpg" data-translate-z="250" />
  </li>
  <li data-w="50" data-h="100">
  <img title="Заголовок изображения" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
  <div>
  <div class="sg-content">
  <h3>Заголовок</h3>
  <p>Текст...</p>
  </div>
  </div>
  </li>
  <!-- ... -->
</ul>


Каждое изображение/элемент может иметь свой вариант перехода:

data-rotate-x
data-rotate-y
data-rotate-z
data-translate-x
data-translate-y
data-translate-z

Структура, которую мы будем создавать динамически, заключается в следующем:

Code
<div class="sg-wrapper">
   
  <div class="sg-box sg-box-1">
  <div class="sg-panel">
  <div style="background-image: url(images/1.jpg);">
  <h2>Заголовок</h2>
  </div>
  </div>
  </div>
   
   
  <div class="sg-box sg-box-2" style="width: 40%; height: 55%; left: 60%; ">
  <!-- ... -->
  </div>
   
  <!-- ... -->
   
</div>


Для вызова плагина используется такой код:

Code
$(function() {
   
  $( '#sg-panel-container' ).gridgallery();
   
});


Скачайте архив слайдера и попытайтесь самостоятельно разобраться в структуре и работе плагина. Это экспериментальная творческая работа.



Сохраните в социальную сеть
Комментарии (1)
Гость 12.07.2013 в 20:04Спам
Куда тыкать код вызова плагина?
0
Чтобы оставить комментарий под этой публикацией,
зарегистрируйтесь или войдите.
Рейтинг лучших сервисов для самостоятельного создания сайта.
Лучшие конструкторы
Легко! Если пользоваться нашими советами.
Создать сайт