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

Rating: 9.8
Author: Денис Абдуллин

02017-01-02945Денис Абдуллин

Это не простой слайдер, это большая творческая работа, в которой анимация использована максимально, и это не просто передвигающиеся картинки, картинки переворачиваются, исчезают, да и не только картинки. Вы, я уверен, сразу полезли смотреть демо, поэтому не имеет смысла описывать 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. Никакого кода!

Чтобы оставить комментарий или отзыв под этой публикацией, войдите или зарегистрируйтесь.