Автор

Галерея для сайта в стиле Metro UI

Галерея для сайта в стиле Metro UI


 

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

 

ДЕМО
ИСХОДНИКИ

 

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

 

Шаг 1. HTML

 

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

 <div style="width:1410px;">
 <div class="metro_gallery flip vertical lightbox" style="float:left;width:880px;">
 <div class="tile tile_4x2 white">
 <img src="images/ferguson.jpg" data-caption="Ferguson" data-link="#" />
 <img src="images/paper.jpg" data-caption="ManUtd" data-link="#" />
 <img src="images/rio.jpg" data-caption="ferdinand" data-link="#" />
 </div>
 <div class="tile tile_2x2 white">
 <img src="images/rooney.jpg" data-caption="Rooney" data-link="#" />
 <img src="images/tshirt.jpg" data-caption="ManUtd" data-link="#" />
 <img src="images/king.jpg" data-caption="ManUtd" data-link="#" />
 </div>

Разметка будет состоять из двух плашек, с размещенными на них квадратами с изображениями. В исходниках можно просмотреть всю разметку.

 

Шаг 2. CSS

Теперь интереснее, с помощью стилей нам необходимо определить стили для контейнера и для блока с изображениями. Кроме этого мы устанавливаем анимацию для блоков, по умолчанию это будет 0.2ms для каждого блока. Кроме этого, когда пользователь наводит курсором на изображение происходит увеличение, и сдвижение изображения, что позволяет вывести подпись. Также не нужно забывать о выводе навигации. Для экономии пространства, мы указали только часть кода:

div.tile {
 float: left;
 z-index: 1;
 position: relative;
}
div.tile.loaded {
}
div.tile:hover {
 z-index: 10;
 -webkit-transition: width 0.1s linear, height 0.1s linear, margin 0.1s linear;
 -moz-transition: width 0.1s linear, height 0.1s linear, margin 0.1s linear;
 -ms-transition: width 0.1s linear, height 0.1s linear, margin 0.1s linear;
 -o-transition: width 0.1s linear, height 0.1s linear, margin 0.1s linear;
 transition: width 0.1s linear, height 0.1s linear, margin 0.1s linear;
}
div.tile.animating {
 -webkit-transition: opacity 0.2s linear, -webkit-transform 0.2s linear;
 -moz-transition: opacity 0.2s linear, -moz-transform 0.2s linear;
 -ms-transition: opacity 0.2s linear, -ms-transform 0.2s linear;
 -o-transition: opacity 0.2s linear, -o-transform 0.2s linear;
 transition: opacity 0.2s linear, transform 0.2s linear;
}
div.metro_gallery.fade div.tile {
 filter: alpha(opacity=0);
 opacity: 0;
}
div.metro_gallery.fade div.tile.loaded {
 filter: alpha(opacity=100);
 opacity: 1;
}
div.metro_gallery.flip div.tile {
 filter: alpha(opacity=0);
 opacity: 0;
 -webkit-transform: rotateY(-90deg);
 -moz-transform: rotateY(-90deg);
 -o-transform: rotateY(-90deg);
 -ms-transform: rotateY(-90deg);
 transform: rotateY(-90deg);
}
div.metro_gallery.flip div.tile.loaded {
 filter: alpha(opacity=100);
 opacity: 1;
 -webkit-transform: none;
 -moz-transform: none;
 -o-transform: none;
 -ms-transform: none;
 transform: none;
}
div.metro_gallery.scale div.tile {
 filter: alpha(opacity=0);
 opacity: 0;
 -webkit-transform: scale(0);
 -moz-transform: scale(0);
 -ms-transform: scale(0);
 -o-transform: scale(0);
 transform: scale(0);
}
div.metro_gallery.scale div.tile.loaded {
 filter: alpha(opacity=100);
 opacity: 1;
 -webkit-transform: none;
 -moz-transform: none;
 -o-transform: none;
 -ms-transform: none;
 transform: none;
}
div.metro_gallery.bw div.tile {
 filter: url(filter.svg#greyscale);
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
}
div.metro_gallery.bw div.tile:hover {
 -webkit-filter: none;
 -moz-filter: none;
 -ms-filter: none;
 -o-filter: none;
 filter: none;
}
/*
Tile Content
*/
div.tile div.img_container {
 overflow: hidden;
 z-index: 5;
 position: absolute;
 top: 5px;
 right: 5px;
 bottom: 5px;
 left: 5px;
}
div.tile div.scroller {
 position: absolute;
 top: 0%;
 left: 0px;
}
div.tile div.scroller > div {
 overflow: auto;
 font-size: 12px;
 color: #FFFFFF;
 background-color: rgba(0,0,0, 0.2);
}
div.tile div.scroller > div > p {
 margin: 10px;
 padding: 0px;
}
.vertical div.tile div.scroller {
 right: 0px;
 -webkit-transition: top 0.2s linear;
 -moz-transition: top 0.2s linear;
 -ms-transition: top 0.2s linear;
 -o-transition: top 0.2s linear;
 transition: top 0.2s linear;
}
.vertical div.tile div.scroller > img,
.vertical div.tile div.scroller > div {
 display: block;
 width: 100%;
 overflow: hidden;
}
.horizontal div.tile div.scroller {
 bottom: 0px;
 -webkit-transition: left 0.2s linear;
 -moz-transition: left 0.2s linear;
 -ms-transition: left 0.2s linear;
 -o-transition: left 0.2s linear;
 transition: left 0.2s linear;
}
.horizontal div.tile div.scroller > img,
.horizontal div.tile div.scroller > div {
 float: left;
 height: 100%;
}
div.tile div.caption {
 z-index: 1;
 position: absolute;
 bottom: 0px;
 left: 0px;
 right: 0px;
 padding: 0px 5px;
 color: transparent;
 line-height: 30px;
 height: 30px;
 overflow: hidden;
 white-space: nowrap;
 text-overflow: ellipsis;
 -webkit-transition: bottom 0.2s linear;
 -moz-transition: bottom 0.2s linear;
 -ms-transition: bottom 0.2s linear;
 -o-transition: bottom 0.2s linear;
 transition: bottom 0.2s linear;
}
div.tile div.caption a {
 color: transparent;
}
div.tile.caption:hover div.caption {
 bottom: -25px;
 color: #FFFFFF;
}
div.tile.caption:hover div.caption a {
 color: #FFFFFF;
}

 

Шаг 3. jQuery

 

Мы будем использовать плагин metro_gallery который поможет нам в анимации и правильном отображении при обновлении, для его инициализации и еще некоторых плагинов нам необходима следующая команда:

<script type="text/javascript">
$(document).ready(function() {
 $("#setting_switch").click(function(e) {
 e.preventDefault();
$(this).toggleClass("active");
 $("#settings").toggleClass("active");
 });
 });
 </script>
 <script type="text/javascript">
 (function() {
 var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
ga.onload = function() {
 ga.parentNode.removeChild(ga);
 };
 })();
 </script>

 

Вот и все. Готово!

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

vk.com/club.ssdru

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



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

Галерея для сайта в стиле Metro UI

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


Галерея для сайта в стиле Metro UI

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


Галерея для сайта в стиле Metro UI

Шумиха по поводу CSS4 возникла абсолютно из ниоткуда, так как мы только привыкли к CSS3, и все планируют использовать эту технологию еще какое-то время. Разработчики браузеров усиленно работают над тем, чтобы их продукт поддерживал самые последние эффекты и свойства, а разработчики внешних интерфейсов создают все больше и больше инструментов для более эффективной работы с таблицами стилей. И сейчас довольно странно слышать что-либо о CSS4. Сразу навязывается вопрос: «А как же CSS3? Разве уже всё?».


Галерея для сайта в стиле Metro UI

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


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close