Красивое оформление изображений на сайте поможет пользователю быстрее найти необходимую информацию, но если оформить галерею картинок еще и достаточно привлекательно, то это заворожит взор пользователя. В данном уроке мы рассмотрим как создать отличную трехмерную галерею для сайта, которую, также, можно использовать в качестве главного ротатора контента на ресурсе. Осуществим мы это с помощью трансформаций css3. Основная идея заключается в круглой галерее, в центре которой у нас будет изображение, а также еще два изображения по бокам.
Так как мы будем использовать параметр perspective, два последних изображения будут появляться на трехмерной плоскости. С помощью 3D transform мы можем сделать простенькие элементы более интересными, спроецировав их на трехмерную плоскость. Подкрепленные CSS переходами, данные элементы могут быть перемещены на 3D плоскость, и создать вполне реалистичный эффект. Сегодня мы рассмотрим как это все осуществить.
Шаг 1. HTML
Для начала мы рассмотрим разметку, вот как она выглядит:
<section id="dg-container" class="dg-container">
<div class="dg-wrapper">
<a href="#"><img src="images/1.jpg" alt="image01"></a>
<a href="#"><img src="images/2.jpg" alt="image02"></a>
<a href="#"><img src="images/3.jpg" alt="image03"></a>
<a href="#"><img src="images/4.jpg" alt="image04"></a>
<a href="#"><img src="images/5.jpg" alt="image05"></a>
<a href="#"><img src="images/6.jpg" alt="image06"></a>
<a href="#"><img src="images/7.jpg" alt="image07"></a>
<a href="#"><img src="images/8.jpg" alt="image08"></a>
<a href="#"><img src="images/9.jpg" alt="image09"></a>
<a href="#"><img src="images/10.jpg" alt="image10"></a>
<a href="#"><img src="images/11.jpg" alt="image11"></a>
<a href="#"><img src="images/12.jpg" alt="image12"></a>
</div>
<nav>
<span class="dg-prev"></span>
<span class="dg-next"></span>
</nav>
</section>Как Вы заметили, разметка достаточно простая, мы использовали простой вывод изображений, и классы для манипуляцией галереи.
Шаг 2. jQuery
Данным образом наша галерея будет инициализироваться:
$('#dg-container').gallery();1
Так как наша галерея использует плагин jQuery, по этому имеются следующие опции, котоые можете изменить на свое усмотрение:
1current : 0,
// индекс начального слайда
autoplay : false,
// автозапуск: включен/отключен
interval : 2000
// время между трансформациями
Материал взят из зарубежного источника - tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery и представлен исключительно в ознакомительных целях.
