Все для веб-дизайнера
3D галерея для сайта с помощью jQuery и CSS3
Красивое оформление изображений на сайте поможет пользователю быстрее найти необходимую информацию, но если оформить галерею картинок еще и достаточно привлекательно, то это заворожит взор пользователя. В данном уроке мы рассмотрим как создать отличную трехмерную галерею для сайта, которую, также, можно использовать в качестве главного ротатора контента на ресурсе. Осуществим мы это с помощью трансформаций css3. Основная идея заключается в круглой галерее, в центре которой у нас будет изображение, а также еще два изображения по бокам.
Так как мы будем использовать параметр perspective, два последних изображения будут появляться на трехмерной плоскости. С помощью 3D transform мы можем сделать простенькие элементы более интересными, спроецировав их на трехмерную плоскость. Подкрепленные CSS переходами, данные элементы могут быть перемещены на 3D плоскость, и создать вполне реалистичный эффект. Сегодня мы рассмотрим как это все осуществить.
Шаг 1. HTML
Для начала мы рассмотрим разметку, вот как она выглядит:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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"><</span> <span class="dg-next">></span> </nav> </section> |
Как Вы заметили, разметка достаточно простая, мы использовали простой вывод изображений, и классы для манипуляцией галереи.
Шаг 2. jQuery
Данным образом наша галерея будет инициализироваться:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$('#dg-container').gallery();[php] Так как наша галерея использует плагин jQuery, по этому имеются следующие опции, котоые можете изменить на свое усмотрение: [php]current : 0, // индекс начального слайда autoplay : false, // автозапуск: включен/отключен interval : 2000 // время между трансформациями |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 28.05.2012 в 10:56, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
