Автор

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

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

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


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

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


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

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


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

На некоторых сайтах вы, наверное, не разе замечали так называемые «Хлебные крошки», которые сохраняют путь пройденного вами пути на сайте. Это достаточно удобно, ведь позволяет быстро вернуться в необходимый раздел сайта. Но зачастую такие крошки достаточно не приметные, и пользователь не обращает на них внимание, при этот данный элемент на сайте теряет свою значимость. В данном уроке мы рассмотрим как стилизовать данные следы на сайте, чтобы они отлично привлекали взор посетителя и при этом выполняли свое задание.


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close