Блог
Главная » Другие » Простое круговое слайд-шоу для uCoz
14:29


Сегодня я хочу поделиться с вами этим простым и веселым круговым слайд-шоу. Это экспериментальная концепция и идея перевернуть изображения под определенным углом в зависимости от места нажатия по картинке. Существует три различных варианта перелистывания слайда для каждой из сторон: вверх по диагонали , по середине и вниз по диагонали. Например, при нажатии на верхнюю правую часть картинки , круг будет вращаться в соответствующий правый угол по диагонали, открывая свою противоположную сторона , на которой уже следующее изображение.

Структура слайда выглядит следующим образом:
Код

<div id="fc-slideshow" class="fc-slideshow">
  <ul class="fc-slides">
  <li><img src="images/1.jpg" /><h3>Hot</h3></li>
  <li><img src="images/2.jpg" /><h3>Cold</h3></li>
  <li><img src="images/3.jpg" /><h3>Light</h3></li>
  <li><img src="images/4.jpg" /><h3>Dark</h3></li>
  <li><img src="images/5.jpg" /><h3>Soft</h3></li>
  <li><img src="images/6.jpg" /><h3>Hard</h3></li>
  <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
  <li><img src="images/8.jpg" /><h3>Rough</h3></li>
  </ul>
</div>


И мы трансформируем его в следующий вид:
Код

<div id="fc-slideshow" class="fc-slideshow">
   
  <ul class="fc-slides">
  <!-- ... -->
  </ul>
   
  <nav>
  <div class="fc-left">
  <span></span>
  <span></span>
  <span></span>
  <i class="icon-arrow-left"></i>
  </div>
  <div class="fc-right">
  <span></span>
  <span></span>
  <span></span>
  <i class="icon-arrow-right"></i>
  </div>
  </nav>
   
  <div class="fc-flip">
  <div class="fc-front">
  <div><img src="images/4.jpg"><h3>Dark</h3></div>
  <div class="fc-overlay-light"></div>
  </div>
  <div class="fc-back">
  <div><img src="images/5.jpg"><h3>Soft</h3></div>
  <div class="fc-overlay-dark"></div>
  </div>
  </div>
   
</div>


"nav" элемент имеет некоторые пустые пролеты, которые служат в качестве "зон обнаружения". Каждая сторона круга состоит из трех интерактивных областей : одна сверху, одна по середине и одна в нижней части. Элемент "i" будет служить стрелками навигации и в зависимости от диапазона фокусировки мыши, мы будем вращать наш блок в нужное нам место. Но мы не будем использовать стрелки, как активную область.
Отдел по флип кругу содержит специальную 3D-структуру: она имеет переднюю и заднюю стороны. Как только мы перемещаемся в следующему или предыдущему элементу, мы показываем, структуру вращения флип-контейнера так, что мы видим обратную сторону элемента.
Накладки сделаны более реалистичным путем использования света и так называемой тени. Мы анимируем непрозрачность в зависимости от угла поворота.
Мы просто вызываем плагин вроде этого:
Код

$( '#fc-slideshow' ).flipshow();


А это параметры для плагина:
Код

// Параметры
$.Flipshow.defaults = {
  // По умолчанию скорость перехода (мс)
  speed : 700,
  // По умолчанию переход смягчения
  easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};


Обратите внимание, что это будет работать в браузерах, которые CSS 3D преобразования. Для других есть простой резервный вариант, который просто показывает предыдущий или следующий пункт.

Надеюсь вам понравился данный материал smile

Автор работы:  MARY LOU

Категория: Другие

Вы не авторизованы, по-этому вы не можете скачивать файлы к материалу, просматривать демо, читать и оставлять комментарии!

Knu.com
  • Опросик
  • Зайдете ли вы к нам еще?