Повноекранні ефекти накладення

17

Від автора: Кілька простих і винахідливих стилів накладення ефектів. Від вислизання накладення у вікно перегляду до застосування фігур-трансформерів SVG – досліджуємо ефекти повноекранних накладень.

Сьогодні ми хотіли б поділитися з вами ідеями стилів і ефектів повноекранного накладення. Як це відбувається з кожним компонентом користувальницького інтерфейсу, з’являються нові течії і стилі, і ми хотіли б випробувати деякі вигадливі і незвичайні ефекти оверлеїв. Їх особливістю є те, що у цих накладень немає фіксованого розміру, як у модальних вікон – вони займають весь екран, так що при створенні ефектів доводиться прийняти цей факт до уваги і постаратися не перестаратися. Але це не означає, що заборонено гратися і застосовувати свіжі цікаві ефекти – наприклад, фігури-трансформери SVG.

Повноекранні ефекти накладенняПовноекранні ефекти накладення

Зверніть увагу, що вони створені для сучасних браузерів, тому в більш старих потрібного ефекту можна досягти. Для таких браузерів, природно, слід продумати альтернативні варіанти. На перший приклад тонкого, проте цікавого ефекту, мене надихнув сайт Huge. Ідея полягає в тому, щоб накладення посилювався, а потім знаходиться всередині контент обертався трохи в 3D:

.overlay-hugeinc {
opacity: 0;
visibility: hidden;
transition: opacity 0.5 s, visibility 0s 0.5 s;
}
.overlay-hugeinc.open {
opacity: 1;
visibility: visible;
transition: opacity 0.5 s;
}
.overlay-hugeinc nav {
perspective: 1200 px;
}
.overlay-hugeinc nav ul {
opacity: 0.4;
transform: translateY(-25%) rotateX(35deg);
transition: transform 0.5 s, opacity 0.5 s;
}
.overlay-hugeinc.open nav ul {
opacity: 1;
transform: rotateX(0deg);
}
.overlay-hugeinc.close nav ul {
transform: translateY(25%) rotateX(-35deg);
}

Для того, щоб оверлей повністю зникав, ми використовуємо прийом visibility: встановлюємо затримку переходу до властивості visibility, що дозволяє спочатку зробити перехід непрозорості.

Для деяких прикладів SVG ми користуємося Snap.svg з метою трансформування одного маршруту в інший. Для прикладу з «маленькими блоками» застосована SVG з невеликою кількістю JS для контролю за появою блоків, але, звичайно, можна для цього використовувати CSS, і взагалі не чіпати SVG.

Сподіваємося, вам сподобалися ці ефекти і послужили джерелом натхнення!