Автор

19 04.2013
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
// время между трансформациями

 

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


vk.com/club.ssdru

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


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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close