—»     —»   Трехмерная галерея на CSS3 и jQuery
  Раздел: Меню и Навигация   Комментариев: 3  

Трехмерная галерея на CSS3 и jQuery



Сегодня мы хотим поделиться с вами экспериментальной 3D-галереей, в которой используются трехмерные трансформации, представленные в CSS3.

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

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

Трехмерная галерея на CSS3 и jQuery

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

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

В нашей галерее мы используем следующую 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,
// автозапуск: включен/отключен

interval : 2000
// время между трансформациями

Надеемся, вам понравилось!

Посмотреть демо | Скачать архивом
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, 3D
Опубликовал Design FactoRy   Прочитано (раз): 5813   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 19 марта 2012 @ 23:23
Написал: Егорка — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
в опере глючит
Комментарий #2: 21 марта 2012 @ 08:41
Написал: Димон — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
в firefox тоже глючит. Скролл внизу появляется постоянно.
Комментарий #3: 21 марта 2012 @ 12:01
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Да, потому, что
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930