—»     —»   Задействуем CSS-параметр Clip на практике: эффект наложения с увеличением
  Раздел: CSS/Style Sheets   Нет комментариев  

Задействуем CSS-параметр Clip на практике: эффект наложения с увеличением



В предыдущей статье, «Учимся понимать параметр CSS Clip», вам предлагается отличный обзор css-параметра Clip, а также функции rect(). Сегодня мы хотим рассказать вам о практической стороне. Сегодня мы займемся созданием привлекательного эффекта, который позволит нам раскрывать дополнительный контент и делать полноэкранное наложение.

Задействуем CSS-параметр Clip на практике: эффект наложения с увеличением

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

Мы реализуем это следующим образом: сначала создаем список пунктов, которые выглядят как блоки в интерфейсе стиля metro:

Задействуем CSS-параметр Clip на практике: эффект наложения с увеличением

Каждый блок будет содержать элемент (наложение), который будет позиционирован абсолютно. Этот элемент будет распространяться по всей странице, но мы его не увидим, так как уровень его непрозрачности будет выставлен на 0. Когда мы производим нажатие по блоку, применяется clip: rect(), и вырезает соответствующую часть внутреннего зафиксированного элемента. Затем мы анимируем clip для того, чтобы раскрыть всю ширину и высоту наложения, которое занимает все окно просмотра:

Задействуем CSS-параметр Clip на практике: эффект наложения с увеличением

Нажатие по кнопке закрытия скроет эффект, а наложение минимизируется до размеров пункта меню, а затем исчезнет.

Итак, давайте начнем с разработки HTML.

Разметка

Мы используем неупорядоченный список для блоков. Каждый пункт меню будет иметь класс icon и опциональный класс «span», который будет отвечать за ширину блока. Внутрь мы добавим некоторый текст и раздел overlay. Наложение будет содержать структуру, которая представляет собой шаблон с колонками. Так как мы выбрали простое приложение с прогнозом погоды, мы здесь покажем прогноз на следующую неделю. Колонка каждого «дня» будет иметь еще несколько span-элементов, которые мы будем использовать в будние дни, иконку погоды и температуры:

<ul id="rb-grid" class="rb-grid clearfix">

<li class="icon-clima-1 rb-span-2">

<h3>Lisbon</h3>
<span class="rb-temp">21°C</span>

<div class="rb-overlay">
<span class="rb-close">close</span>
<div class="rb-week">
<div><span class="rb-city">Lisbon</span><span class="icon-clima-1"></span><span>21°C</span></div>
<div><span>Mon</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Tue</span><span class="icon-clima-2"></span><span>19°C</span></div>
<div><span>Wed</span><span class="icon-clima-2"></span><span>18°C</span></div>
<div><span>Thu</span><span class="icon-clima-2"></span><span>17°C</span></div>
<div><span>Fri</span><span class="icon-clima-1"></span><span>19°C</span></div>
<div><span>Sat</span><span class="icon-clima-1"></span><span>22°C</span></div>
<div><span>Sun</span><span class="icon-clima-1"></span><span>18°C</span></div>
</div>
</div>

</li>

<li class="icon-clima-2">
<h3>Paris</h3><span class="rb-temp">11°C</span>
<div class="rb-overlay">
<!-- ... -->
</div>
</li>

<li><!-- ... --></li>

<!-- ... -->

</ul>

Давайте перейдем к разработке стиля.

CSS-код

Обратите внимание на то, что CSS не будет содержать каких-либо браузерных префиксов, но вы сможете найти их в файлах.

Неупорядоченный список будет центрирован в родительском элементе, а стилизацию списка мы уберем:

.rb-grid {
list-style: none;
text-align: center;
margin: 0 auto;
}

Пункты списка будут иметь гибкую ширину, и мы зададим им значение ширины 15em. Они будут выравнены по левой стороне:

.rb-grid li {
width: 24%;
height: 15em;
margin: 0.5%;
background: #8CC7DF;
color: #fff;
display: block;
float: left;
padding: 1.6em;
cursor: pointer;
position: relative;
}

Здесь есть три разные ширины для наших сеточных элементов: default, где ширина будет равна 24%, а затем будут следующие 2 значения:

.rb-grid li.rb-span-2 {
width: 49%;
}

.rb-grid li.rb-span-4 {
width: 99%;
}

Давайте стилизуем заголовок названия города:

.rb-grid li h3 {
font-size: 2.6em;
font-weight: 100;
}

Мы интегрируем css-файл для иконического шрифта, который будем использовать. Этот шрифт называется Climacons, и он был разработан Adam Whitcroft. Вы можете просмотреть файл climacons.css, чтобы увидеть включенные в него иконки. В основном мы используем класс icon, чтобы добавить иконку посредством псевдо-элемента. В нашей сетке нам нужно расположить их абсолютно в правом нижнем углу, что создает небольшой срез:

.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
font-size: 10em;
position: absolute;
display: block;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 3;
opacity: 0.4;
text-align: right;
pointer-events: none;
}

Иконка температуры будет полупрозрачной, и к ней мы также добавим переход уровня непрозрачности:

.rb-temp {
display: block;
font-size: 2em;
opacity: 0.5;
transition: all 0.3s ease-in-out;
}

При наведении курсора мыши на пункт списка, мы просто увеличиваем его:

.rb-grid li:hover .rb-temp {
opacity: 1;
}

Теперь давайте обратим внимание на важный раздел overlay. В результате нам нужно получить полноэкранное наложение, поэтому мы выставляем ширину и высоту на 100%. Нам нужно, чтобы этот элемент не был относительным чему-либо, и нам нужно, чтобы он открывался поверх всего остального, поэтому давайте зададим ему фиксированную позицию. Таким образом мы добиваемся того, что он будет открывать поверх всего остального, но это приводит к наложению элементов друг на друга, поэтому изначально нам нужно выставить параметр z-index на -1. Это приведет к тому, что он будет открываться позади контента страницы. Выставив параметр непрозрачности на 0, мы сделаем невидимым:

.rb-overlay {
opacity: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all 0.4s ease;
z-index: -1;
pointer-events: none;
cursor: default;
}

Это и будет исходное положение нашего наложения. Как только мы кликаем по пункту меню, выставляются соответствующие значения rect() в параметре clip, и наложение раскрывается за счет анимирования значений rect().

Но давайте сначала рассмотрим остальную стилизацию.

У каждого наложения будет небольшая «кнопка» закрытия, которая будет расположена в верхнем правом углу:

.rb-close {
position: absolute;
top: 0.4em;
right: 0.4em;
width: 2em;
height: 2em;
text-indent: -9000px;
cursor: pointer;
z-index: 1000;
}

.rb-close:before {
content: 'x';
font-weight: 100;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 3em;
line-height: 0.6;
text-align: center;
text-indent: 0px;
}

Оболочка для колонок будет иметь класс rb-week (хотя мы в него также включим колонку текущей погоды). Нам нужно выставить его ширину и высоту на 100%, чтобы у нас была возможность правильно выставить высоту и ширину его дочерних элементов:

.rb-week {
width: 100%;
height: 100%;
}

У «колонок» будет 10% ширины (за исключением первой, у которой ширина составит 30%), и все они будут придерживаться левого края:

.rb-week > div {
width: 10%;
height: 100%;
float: left;
position: relative;
padding: 3% 0;
}

.rb-week > div:first-child {
width: 30%;
}

В общем у нас 8 колонок, так что 7 раз по 10% будет 70%, и поэтому левая колонка (то есть, первая) у нас будет занимать 30%.

Каждый из span-элементов будет иметь высоту 30% и небольшие отступы:

.rb-week span {
padding: 5% 0;
font-size: 2em;
font-weight: 100;
display: block;
margin: auto 0;
height: 30%;
width: 100%;
line-height: 0.8;
}

Span-элемент для названия города будет иметь особый стиль, в котором будет использовать более тонкий шрифт:

.rb-week span.rb-city {
font-weight: 700;
padding: 1% 10%;
font-size: 1em;
line-height: 1.2;
}

У иконок будет больший в размере шрифт, и нам понадобится сбросить font weight, так как мы этот параметр изменили в другом правиле:

.rb-week [class^="icon-"]:before {
font-size: 2.5em;
font-weight: normal;
}

Иконка в колонке текущей погоды будет почти прозрачной:

.rb-week > div:first-child [class^="icon-"] {
opacity: 0.1;
}

Теперь давайте займемся настройкой фоновых цветов для каждого пункта списка и каждой колонки в наложениях.

У нас есть 11 пунктов списка:

/* Colors */

/* Grid */
.rb-grid li:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(2) { background: #33CCCC; }
.rb-grid li:nth-child(3) { background: #996699; }
.rb-grid li:nth-child(4) { background: #C24747; }
.rb-grid li:nth-child(5) { background: #e2674a; }
.rb-grid li:nth-child(6) { background: #FFCC66; }
.rb-grid li:nth-child(7) { background: #99CC99; }
.rb-grid li:nth-child(8) { background: #669999; }
.rb-grid li:nth-child(9) { background: #CC6699; }
.rb-grid li:nth-child(10) { background: #339966; }
.rb-grid li:nth-child(11) { background: #666699; }

И в каждом наложении у нас есть 8 колонок:

/* Overlay Columns */
.rb-grid li:nth-child(1) .rb-week > div:nth-child(1) { background: #3399CC; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(2) { background: #2D87B4; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(3) { background: #297AA3; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(4) { background: #256E93; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(5) { background: #216283; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(6) { background: #1D5672; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(7) { background: #184962; }
.rb-grid li:nth-child(1) .rb-week > div:nth-child(8) { background: #143D52; }

.rb-grid li:nth-child(2) .rb-week > div:nth-child(1) { background: #33CCCC; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(2) { background: #2DB4B4; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(3) { background: #29A3A3; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(4) { background: #259393; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(5) { background: #218383; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(6) { background: #1D7272; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(7) { background: #186262; }
.rb-grid li:nth-child(2) .rb-week > div:nth-child(8) { background: #145252; }

/* ... */

…и так для всех 11 блоков.

Последнее, но не менее важное, заключается в том, что нам необходимо позаботиться о меньших в размере экранах при помощи media queries. Когда пространство ограничено, нам нужно, чтобы в сетке блоки больше не отображались:

@media screen and (max-width: 63.125em) {

.rb-grid li,
.rb-grid li.rb-span-2,
.rb-grid li.rb-span-4 {
width: 100%;
height: 10em;
text-align: left;
}

.rb-grid li[class^="icon-"]:before,
.rb-grid li[class*=" icon-"]:before {
font-size: 6em;
left: auto;
right: 0;
line-height: 2.5;
}

.rb-grid li > div {
text-align: center;
}
}

Колонки наложения и текст внутри будут обработаны плагином FitText, поэтому нам не придется сильно изменять шаблон.

Теперь давайте взглянем на некоторые важные части javascript.

javascript-код

Давайте начнем с кэширования некоторых элементов и инициализации нескольких переменных:

var $items = $( '#rb-grid > li' ),
transEndEventNames = {
'WebkitTransition' : 'webkitTransitionEnd',
'MozTransition' : 'transitionend',
'OTransition' : 'oTransitionEnd',
'msTransition' : 'MSTransitionEnd',
'transition' : 'transitionend'
},

// transition end event name
transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],

// window and body elements
$window = $( window ),
$body = $( 'BODY' ),

// transitions support
supportTransitions = Modernizr.csstransitions,

// current item's index
current = -1,

// window width and height
winsize = getWindowSize();

Сначала мы применяем функционал jQuery-плагина FitText к элементам текста в колонках в наложениях, чтобы немного уменьшить текст и адаптировать его к маленьким экранам.
Затем мы привязываем каждое событие click к пунктам и кнопкам закрытия (на каждом пункте).

Также, нам нужно получить текущие значения ширины и высота окна, поэтому мы привязываем событие масштабирования к элементу окна.

function init( options ) {      
// apply fittext plugin
$items.find( 'div.rb-week > div span' ).fitText( 0.3 ).end().find( 'span.rb-city' ).fitText( 0.5 );
initEvents();
}

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

Здесь также стоит обратить внимание на еще две вещи, чтобы все работало корректно. Во-первых, мы «отображаем и скрываем» скроллинг страницы между положениями, так как нам нужно отключить возможность прокрутки, когда наложение раскрыто на весь экран. Во-вторых, мы выставляем параметр z-index у наложения на самое высокое значение, чтобы оно всегда было поверх остальных элементов, а pointer-events выставляем на auto, чтобы по наложению и его содержимому можно было кликать. Если переходы не поддерживаются, то мы просто пропускаем первое положение, и тогда при клике наложение будет раскрыто и отображено мгновенно.

function initEvents() {

$items.each( function() {

var $item = $( this ),
$close = $item.find( 'span.rb-close' ),
$overlay = $item.children( 'div.rb-overlay' );

$item.on( 'click', function() {

if( $item.data( 'isExpanded' ) ) {
return false;
}
$item.data( 'isExpanded', true );
// save current index of the item
current = $item.index();

var layoutProp = getItemLayoutProp( $item ),
clipPropFirst = 'rect(' + layoutProp.top + 'px ' + ( layoutProp.left + layoutProp.width ) + 'px ' + ( layoutProp.top + layoutProp.height ) + 'px ' + layoutProp.left + 'px)',
clipPropLast = 'rect(0px ' + winsize.width + 'px ' + winsize.height + 'px 0px)';

$overlay.css( {
clip : supportTransitions ? clipPropFirst : clipPropLast,
opacity : 1,
zIndex: 9999,
pointerEvents : 'auto'
} );

if( supportTransitions ) {
$overlay.on( transEndEventName, function() {

$overlay.off( transEndEventName );

setTimeout( function() {
$overlay.css( 'clip', clipPropLast ).on( transEndEventName, function() {
$overlay.off( transEndEventName );
$body.css( 'overflow-y', 'hidden' );
} );
}, 25 );

} );
}
else {
$body.css( 'overflow-y', 'hidden' );
}

} );

...

} );

...

}

function getItemLayoutProp( $item ) {

var scrollT = $window.scrollTop(),
scrollL = $window.scrollLeft(),
itemOffset = $item.offset();

return {
left : itemOffset.left - scrollL,
top : itemOffset.top - scrollT,
width : $item.outerWidth(),
height : $item.outerHeight()
};

}

Что касается события click элемента для закрытия наложения, то здесь мы просто возвращаемся к тому, что уже было сделано ранее:

function initEvents() {

$items.each( function() {

...

$close.on( 'click', function() {

$body.css( 'overflow-y', 'auto' );

var layoutProp = getItemLayoutProp( $item ),
clipPropFirst = 'rect(' + layoutProp.top + 'px ' + ( layoutProp.left + layoutProp.width ) + 'px ' + ( layoutProp.top + layoutProp.height ) + 'px ' + layoutProp.left + 'px)',
clipPropLast = 'auto';

// reset current
current = -1;

$overlay.css( {
clip : supportTransitions ? clipPropFirst : clipPropLast,
opacity : supportTransitions ? 1 : 0,
pointerEvents : 'none'
} );

if( supportTransitions ) {
$overlay.on( transEndEventName, function() {

$overlay.off( transEndEventName );
setTimeout( function() {
$overlay.css( 'opacity', 0 ).on( transEndEventName, function() {
$overlay.off( transEndEventName ).css( { clip : clipPropLast, zIndex: -1 } );
$item.data( 'isExpanded', false );
} );
}, 25 );

} );
}
else {
$overlay.css( 'z-index', -1 );
$item.data( 'isExpanded', false );
}

return false;

} );

} );

...

}

И на этом всё! Мы надеемся, что вам понравилось это руководство и что оно пригодится вам в проектах!

Также не забудьте посмотреть второе демо, в котором вы увидите дополнительный интересный эффект, использованный для раскрытия наложения. Эффект вращения выполнен при помощи простого перехода. Это отличный пример того, как вы можете использовать данный метод для собственных проектов.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал Design FactoRy   Прочитано (раз): 5916   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Generac
Газопоршневые электростанции. Тематические публикации.
generac.su
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930