Автор

3D галерея для сайта с помощью jQuery и CSS3

3D галерея для сайта с помощью jQuery и CSS3


 

Красивое оформление изображений на сайте поможет пользователю быстрее найти необходимую информацию, но если оформить галерею картинок еще и достаточно привлекательно, то это заворожит взор пользователя. В данном уроке мы рассмотрим как создать отличную трехмерную галерею для сайта, которую, также, можно использовать в качестве главного ротатора контента на ресурсе. Осуществим мы это с помощью трансформаций 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">&lt;</span>
 <span class="dg-next">&gt;</span>
 </nav>
 </section>

Как Вы заметили, разметка достаточно простая, мы использовали простой вывод изображений, и классы для манипуляцией галереи.

Шаг 2.  jQuery

Данным образом наша галерея будет инициализироваться:

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

Так как наша галерея использует плагин jQuery, по этому имеются следующие опции, котоые можете изменить на свое усмотрение:

1current : 0,
// индекс начального слайда

autoplay : false,
// автозапуск: включен/отключен

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

 

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеCSS3

3D галерея для сайта с помощью jQuery и CSS3

Полноразмерный, адаптивный и простой в настройке слайдер.


3D галерея для сайта с помощью jQuery и CSS3

Сегодня мы сделаем новую фото галерею. Недавно я обнаружил еще один приятный JQuery плагин - Galleriffic. Этот плагин хорошо оптимизирован для работы с большими объемами фотографий. Также есть хорошие возможности, как на маленькую картинку, навигации (с нумерацией страниц), jQuery.history плагин интеграции, слайд-шоу с Play/Pause, клавиатуры и т.д.


3D галерея для сайта с помощью jQuery и CSS3

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


3D галерея для сайта с помощью jQuery и CSS3

Окончено создание сайта. Процесс от начала до окончания проекта был очень долгим:) Заказ на создание сайта был сделан 2 года назад, но только со сменой руководства в прошлом месяце всё сдвинулось с места!!!


Раскрутка в соцсетях

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


Перейти в Блог

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close