В данном уроке мы рассмотрим как создать эффект наложения сетки для сайта с использованием трансформаций css, основная идея состоит в том, что мы имеем плоскость на которой нанесены специальные метки, в данном случае это информация о погоде, при нажатии на данную плоскость, которую, кстати, мы поместили для стилизации вида в корпус iphone, происходит разворот сетки, с возможностью выбора различных вариантов отображения погоды. Все это будет происходить с плавной анимацией, кроме этого мы рассмотрим несколько вариантов сетки.
Данные примеры работают во всех современны браузерах, за исключением IE. В демонстрации мы использовали макет iPhone от талантливого дизайнера Jakub Kejha - dribbble.com/shod4n И так, давайте приступим.
Шаг 1. HTML
Для начала нам необходимо создать простой контейнер, который будет содержать отдел с макетом и отдел с сеткой.
<div class="main">
<div id="ac-wrapper" class="ac-wrapper">
<h2><font color=#bbd91e>Погода</font> <span>Концепт & UI Дизайн</span></h2>
<div class="ac-device">
<a href="#"><img src="images/screen1.jpg"/></a>
<h3 class="ac-title">Gentrify small batch umami retro vegan</h3>
</div>
<div class="ac-grid">
<a href="#"><img src="images/screen1.jpg"/><span>Gentrify small batch umami retro vegan</span></a>
<a href="#"><img src="images/screen2.jpg"/><span>Chambray squid semiotics</span></a>
<a href="#"><img src="images/screen3.jpg"/><span>Fashion axe blue bottle</span></a>
<a href="#"><img src="images/screen4.jpg"/><span>Photo booth single-origin coffee</span></a>
<a href="#"><img src="images/screen5.jpg"/><span>Flexitarian synth keytar blog master</span></a>
<a href="#"><img src="images/screen6.jpg"/><span>Next level retro flexitarian freegan</span></a>
<a href="#"><img src="images/screen7.jpg"/><span>Pour-over superious meggings terry</span></a>
<a href="#"><img src="images/screen8.jpg"/><span>Seitan william vinyl chillwave</span></a>
</div>
</div>
Как только мы нажимаем на элемент сетки, мы будем обновлять содержание устройства контейнера. Давайте перейдем к стилям.
Шаг 2. CSS
Для начала нам необходимо определить общие параметры контейнера и его позиционирование по центру.
.ac-wrapper {
width: 100%;
position: relative;
perspective: 1000px;
perspective-origin: 50% 25%;
}Демо будет содержать телефон, в котором будет располагаться контейнер при нажатии на который будет происходить разворот сетки.
.ac-device {
background: url(../images/iPhone.png) no-repeat;
width: 288px;
height: 611px;
margin: 0 auto;
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
}Для каждой плоскости нам необходимо установить якорь и размеры для отображения на макете:
.ac-device a {
height: 440px;
width: 249px;
display: inline-block;
margin: 85px 0 0 20px;
}
.ac-device a img {
display: block;
}Установим абсолютное позиционирование по правой стороне для плоскостей:
.ac-device h3 {
position: absolute;
font-size: 2.5em;
left: 100%;
width: 100%;
top: 60%;
margin-left: 30px;
font-weight: 300;
color: #888;
}Теперь нам необходимо установить общие параметры стилей для самой сетки, мы хотим отобразить восемь элементов, соответственно у нас будет два ряда по четверо блоков. Мы также добавим переход в -350px по оси Z:
.ac-grid {
position: absolute;
width: 620px;
left: 50%;
margin-left: -310px;
height: 100%;
z-index: 1000;
top: 0;
opacity: 0;
pointer-events: none;
transform-style: preserve-3d;
transition: all 0.3s ease;
transform: translateZ(-350px);
}Якоря в сетке будут размещены внутри изображений и будут установлены на 100% ширины.
.ac-grid a {
width: 145px;
display: block;
position: relative;
float: left;
margin: 10px 5px;
cursor: pointer;
}
.ac-grid a img {
display: block;
width: 100%;
}Мы привели одни с основных стилей, более детально для каждого примера можно просмотреть в исходниках, теперь давайте взглянем на JavaScript.
Шаг 3. JavaScript
Нам необходимо кэшировать и инициализировать некоторые переменные:
var $el = $( '#ac-wrapper' ),
// Элемент устройства
$device = $el.find( '.ac-device' ),
// Оболочки изображений
$trigger = $device.children( 'a:first' ),
// Экраны
$screens = $el.find( '.ac-grid > a' ),
// Изображение устройства
$screenImg = $device.find( 'img' ),
// Название экрана
$screenTitle = $device.find( '.ac-title' ),
// HTML Body элементы
$body = $( 'body' );Мы будем связывать события c оболочками изображений (якоря) и на экран элементов.
function init() {
// Показать сетку
$trigger.on( 'click', showGrid );
// Показать сетку, когда нажали на элемент
$screens.on( 'click', function() {
showScreen( $( this ) );
return false;
} );
}Когда нажали на плоскость, то нам необходимо убрать "AC-GridView", при этом необходимо обновлять исходное изображение и название на соответствующие элементы:
function showScreen( $screen ) {
$el.removeClass( 'ac-gridview' );
if( $screen ) {
// Обновляем изображение и название
$screenImg.attr( 'src', $screen.find( 'img' ).attr( 'src' ) );
$screenTitle.text( $screen.find( 'span' ).text() );
}
}Вот и все. Готово!
Материал взят из зарубежного источника - tympanus.net/codrops/2013/04/01/app-showcase-with-grid-overlay и представлен исключительно в ознакомительных целях.
