3D галерея при помощи CSS3 и jQuery

3D галерея при помощи CSS3 и jQuery

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

Основная идея заключается в создании круговой галереи, где у нас есть одно изображение в центре и два по бокам. Так как мы используем перспективу, два боковых изображения будут создавать эффект трехмерности, когда мы их будем поворачивать.

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

Как это работает

Следующая HTML-разметка используется для этой галереи:

<section id="dg-container" class="dg-container">
 <div class="dg-wrapper">
 <a href="#">
 <img src="images/1.jpg" alt="image01">
 <div>http://www.colazionedamichy.it/</div>
 </a>
 <a href="#">
 <!-- ... -->
 </a>
 <!-- ... -->
 </div>
 <nav>
 <span class="dg-prev"><</span>
 <span class="dg-next">></span>
 </nav>
</section>

А это инициализация галереи:

$('#dg-container').gallery();

Параметры:

Доступны следующие варианты:

current     : 0,
//индекс текущего элемента
 
autoplay    : false,
// slideshow вкл / выкл
 
interval    : 2000
// время между переходами

Я надеюсь, что вам понравился этот пример!

Используйте кнопки навигации внизу страницы для перехода между элементами галереи

Демонстрация

Скачать исходный файлы

Перевод статьи с tympanus.net/codrops


Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом

You have no rights to post comments