Speed-Css » Каталог файлов » Всё для uCoz

3D галерея для uCoz

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

Это будет работать только в браузерах, поддерживающих новые свойства CSS. Скрипт был протестирован в последних версиях Safari, Mobile Safari, Chrome, Firefox. (но не так все гладко, как хотелось бы)

ДЕМО

Установка:

Html структура (в нужное вам место ставим):

Выделить всё | Развернуть

 
 <ul id="sg-panel-container"> 
  <li data-w="60" data-h="55"> 
  <img title="Grexit" src="images/1.jpg" data-rotate-x="50" /> 
  <img title="Godwottery" src="images/2.jpg" data-rotate-y="-50" /> 
  <img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" /> 
  <img title="Etiquette" src="images/4.jpg" data-translate-z="250" /> 
  </li> 
  <li data-w="50" data-h="100"> 
  <img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" /> 
  <div> 
  <div class="sg-content"> 
  <h3>Proinde vos postulo</h3> 
  <p>Veggies sunt bona vobis, proinde...</p> 
  </div> 
  </div> 
  </li> 
  <!-- ... --> 
 </ul>

Далее подключаем css & jquery перед закрывающимся тегом /head :

Выделить всё | Развернуть

 
 <link rel="stylesheet" type="text/css" href="css/style.css" /> 
 <script type="text/javascript" src="js/modernizr.custom.69142.js"></script>

А этот код jquery ставим перед /body:

Выделить всё | Развернуть

 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
  <script type="text/javascript" src="js/jquery.transit.min.js"></script> 
  <script type="text/javascript" src="js/jquery.imagesloaded.js"></script> 
  <script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script> 
  <script type="text/javascript" src="js/jquery.gridgallery.js"></script> 
  <script type="text/javascript">  
  $(function() { 
   
  $( '#sg-panel-container' ).gridgallery(); 
   
  }); 
  </script> 
  <script>

Подробнее:
data-w - ширина слайда(картинки/элемента)
определяется в процентах (%)
data-h - высота слайда(картинки/элемента)

data-rotate-x
data-rotate-y
data-rotate-z
- это 3D эффекты для элементов
data-translate-x
data-translate-y
data-translate-z

Источник: tympanus.net/codrops

Не скачивается???