Розмітка макета з анімацією елементів сітки

1

Від автора: Чуйна розмітка макета (на зразок інтернет-магазину) з анімацією елементів, сітки, яка відбувається при відкритті контенту.

Сьогодні ми хотіли б поділитися з вами прикладом простої розмітки макета з анімацією сітки. Чуйна розмітка має бічну колонку (сайдбар) і елементи сітки, до яких при натисканні буде застосовуватися анімація, розширює їх контентну область.

Розмітка макета з анімацією елементів сіткиРозмітка макета з анімацією елементів сітки

У першому демо-прикладі контентна область «заливає» сітку (в основі лежить концепт, розроблений Верджил Пана (Virgil Pana)), а в другому демо-прикладі вся розмітка зміщується вліво, в той час як елемент сітки розширюється (в основі лежить ескіз на сайті Dribble, зроблений Семом Тиболтом (Sam Thibault)).

Розширюється елемент (який є підставною і не є самим елементом сітки) не збільшується анімоване в розмірах (у висоту і ширину), а, навпаки, йому спочатку задані вихідні розміри, і ми просто зменшуємо його до потрібних нам меж. Встановлюючи класи, ми можемо контролювати всі переходи: зникнення елементів, сітки і поява елементів з контентом (і, навпаки, коли ми закриваємо відкритий елемент).

Розмітка макета з анімацією елементів сітки

Розмітка є адаптованою під мобільні пристрої завдяки техніці медіа-запитів, що включає визначення контрольних точок (брейкпойнтов), грунтуючись на розмірах елемента сітки і сайдбара. Для цього ми використовували препроцесор Sass, який дозволяє з легкістю визначити змінні для подібних величин. За великим рахунком, даний підхід можна вважати підходом «спочатку мобільні», але ми також зробили деяку перестановку для маленьких екранів.

Будь ласка, зверніть увагу, що при створенні цієї розмітки використовувалися деякі сучасні техніки, включають застосування одиниць області перегляду, переходів, модуля flexbox та інших властивостей, які будуть працювати тільки в сучасних браузерах.

Другий демо-приклад носить більше експериментальний характер, і він може працювати неоднаково в різних браузерах. Схоже, що Internet Explorer є певні проблеми з переходами, які застосовуються до трансформацій, де задіяна функція calc().

Вся увага в цій розмітці приділено самому ефекту розширення елемента сітки, тому багато елементи є просто заглушками (завантажувач, фільтр у верхній частині розмітки, напис «завантажити» внизу розмітки). Основна розмітка виглядає наступним чином:

Menu

Close

Sass файли для даного проекту поділені на основний файл зі стилями і два додаткових, один – для базових стилів, а інший – для медіа-запитів. Для кожного демо-приклад є свій унікальний файл з таблицею стилів (style1.scss і style2.scss), де ми ініціалізуємо деякі змінні і перевизначаємо деякі стилі (як це зроблено у другому демо-прикладі). Існує багато способів організації файлів для вашого проекту на Sass; для даного проекту було зручно організувати файли саме так. Якщо ви захочете використовувати код одного з файлів, то вам варто переглянути деякі стилі. Якщо ви не знайомі з Sass, то ви просто можете скористатися вже згенерували файлами з CSS.

Приклад основного Sass файлу для демо-прикладів:

$item_width: 300px;
$sidebar_width: 300px;
$color_primary: #fafafa;
$color_secondary: #fff;
$color_link: #81c483;
$anim-time: 0.5 s;
@import «base»;
@import «mediaqueries»;

Змінні, які будуть потрібні для базових стилів і для медіа-запитів, визначені тут.

Розмітка макета з анімацією елементів сітки

Кількість контрольних точок для медіа-запитів визначається кількістю елементів в сітці і сайдбаром (код наведено без префіксів):

/* Розміри області перегляду, засновані на кількості колонок і сайдбарі */
$viewport_xs: $item_width + $sidebar_width; /* 1 колонка */
$viewport_s: $item_width * 2 + $sidebar_width; /* 2 колонки */
$viewport_m: $item_width * 3 + $sidebar_width; /* 3 колонки */
$viewport_l: $item_width * 4 + $sidebar_width; /* 4 колонки */
$viewport_xl: $item_width * 5 + $sidebar_width; /* 5 колонок */
$viewport_xxl: $item_width * 6 + $sidebar_width; /* 6 колонок */
@media screen and (min-width: $viewport_xs) {
html
body,
.container,
.main {
height: 100vh;
}
.main {
height: 100%;
margin-left: $sidebar_width;
}
.content__item {
font-size: 1em;
}
.grid__item {
padding: 45px 45px 30px;
}
}
@media screen and (min-width: $viewport_s) {
.grid {
display: flex;
flex-wrap: wrap;
}
/* 2 колонки */
.grid__item {
width: 50%;
border: none;
}
.grid__item::before {
top: 5px;
right: 5px;
bottom: 5px;
left: 5px;
border: 1px solid rgba(74,74,74,0.075);
transition: opacity 0.3 s;
}
.grid__item:hover::before,
.grid__item:focus::before {
border: 3px solid rgba(129,196,131,0.5);
}
.grid__item—loading.grid__item::before {
opacity: 0;
}
}
@media screen and (min-width: $viewport_m) {
/* 3 колонки */
.grid__item {
width: 33.333%;
}
}
@media screen and (min-width: $viewport_l) {
/* 4 колонки */
.grid__item {
width: 25%;
}
}
@media screen and (min-width: $viewport_xl) {
/* 5 колонок */
.grid__item {
width: 20%;
}
}
@media screen and (min-width: $viewport_xxl) {
/* 6 колонок */
.grid__item {
width: 16.66%;
}
}
/* зміни сайдбара на маленьких екранах (він перетворюється на приховане меню) */
@media screen and (max-width: $viewport_xs — 1px) {
.sidebar {
transform: translate3d(-100%,0,0);
}
.sidebar.sidebar—open {
transform: translate3d(0,0,0);
}
.sidebar.sidebar—open ~ .main {
pointer-events: none;
}
.top-bar {
padding: 22px 15px 10px 60px;
}
.menu-toggle {
display: inline-block;
}
.sidebar .close-button {
opacity: 1;
top: 15px;
right: 15px;
pointer-events: auto;
}
.title—full {
font-size: 2em;
}
.content__item {
padding: 80px 20px 40px;
}
.close-button {
padding: 10px 20px;
}
.close-button::before {
content: «;
position: absolute;
top: 0;
right: 0;
background: $color_secondary;
border-bottom: 1px solid $color_primary;
width: 100vw;
height: 50px;
pointer-events: none;
z-index: -1;
}
}

Дана техніка є дуже корисною, коли доводиться працювати з сітками. Оптимально було б не використати останній медіа-запит, якщо б ми хотіли суворо дотримуватися підходу «спочатку мобільні». Але оскільки ці стилі застосовуються виключно для маленьких екранів, нам би не хотілося змінити стилі для великих екранів.

Подивіться на розмітку макета і на сам ефект, а також поразбирайтесь з вихідним кодом. Ми дуже сподіваємося, що даний шаблон виявиться для вас корисним і надихаючим!