| Главная » Файлы » Прочие скрипты » jQuery |
3D галерея для uCoz
| 24.06.14, 10:11:20 | |
 Давно не было моей активности на этом сайте к сожалению, и сегодня я хотел бы это исправить. Панель содержит слайды, где каждый состоит максимум из 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> 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 | |
| Просмотров: 419 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |