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

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

02017-01-02181Денис Абдуллин
Это не простой слайдер, это большая творческая работа, в которой анимация использована максимально, и это не просто передвигающиеся картинки, картинки переворачиваются, исчезают, да и не только картинки. Вы, я уверен, сразу полезли смотреть демо, поэтому не имеет смысла описывать 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();
   
});


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

Создать сайт в uKit Нужен классный сайт для бизнеса?
Воспользуйтесь сервисом uKit. Никакого кода!
Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.