Стильні ефекти модальних вікон

15

Від автора: набір експериментальних ефектів появи модальних вікон з допомогою переходів і анімації CSS.

Сьогодні ми хочемо поділитися з вами ідеями ефектів модальних вікон. Вони пропонують нескінченні можливості переходів появи діалогових блоків, і ми хотіли б підказати вам деякі думки про те, як показувати діалоги, і трохи пожвавити вашу уяву.

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

Будь ласка, зверніть увагу: це працює належним чином тільки в браузерах, які підтримують відповідні властивості CSS. Тільки сучасні браузери!

Стильні ефекти модальних віконСтильні ефекти модальних вікон

Багато знають про проблему застосування visibility/opacity в iOS < 6 Mobile Safari, так що в більш старих пристроях вони, можливо, не стануть працювати.

Структура модального вікна складається з основного пакувальника і розділу вмісту:

Основний пакувальник використовується як контейнер, який буде показуватися або ховатися (з допомогою visibility і при використанні класу «md-show»), а у його внутрішнього контенту буде перехід. Overlay поміщений після modal, тому можна контролювати його зовнішній вигляд за допомогою сусіднього селектора того ж рівня (сиблинга):

.md-modal {
position: fixed;
top: 50%;
left: 50%;
width: 50%;
max-width: 630px;
min-width: 320px;
height: auto;
z-index: 2000;
visibility: hidden;
backface-visibility: hidden;
transform: translateX(-50%) translateY(-50%);
}
.md-show {
visibility: visible;
}
.md-overlay {
position: fixed;
width: 100%;
height: 100%;
visibility: hidden;
top: 0;
left: 0;
z-index: 1000;
opacity: 0;
background: rgba(143,27,15,0.8);
transition: all 0.3 s;
}
.md-show ~ .md-overlay {
opacity: 1;
visibility: visible;
}

Для досягнення деяких ефектів, крім того, додамо елементу html клас. Нам це потрібно для створення деякого 3D-ефекту для body і контенту. Зауважте, що ми вважаємо, що весь вміст сторінки (за винятком modal і overlay) обгорнуте в контейнер:

.md-perspective,
.md-perspective body {
height: 100%;
overflow: hidden;
}
.md-perspective body {
background: #222;
perspective: 600px;
}
.container {
background: #e74c3c;
min-height: 100%;
}

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

/* Ефект 5: газета */
.md-show.md-effect-5 ~ .md-overlay {
background: rgba(0,127,108,0.8);
}
.md-effect-5 .md-content {
transform: scale(0) rotate(720deg);
opacity: 0;
transition: all 0.5 s;
}
.md-show.md-effect-5 .md-content {
transform: scale(1) rotate(0deg);
opacity: 1;
}

Кнопки запуску отримають атрибут даних, що містить посилання на той модальний блок, який нам потрібно показати:

Newspaper

Для окремих випадків з перспективою, крім того, додамо кнопці запуску клас «md-setperspective».
З допомогою JavaScript’а при клацанні по кнопці просто додаємо відповідного модального вікна з перспективою клас «md-show», і, якщо позначено, клас «md-perspective» для елемента html.

Щоб поекспериментувати з новими ефектами, додайте нову кнопку і нове модальне вікно з класом ефекту і ID, зробивши посилання на цей ID в атрибуті даних цієї кнопки «data-modal». Потім для даного окремого ефекту можна додати інший набір стилів.

Якщо хочете, щоб ефект/перехід відбувався тільки при появі модального вікна, а не його зникнення, то просто додайте перехід до заяви “.md-show.md-effect-x .md-content» (як ви це робили в деяких прикладах).
Для створення ефекту фонового розмиття в підтримці старих браузерів ми застосовуємо полифил від Крістіана Шефера (Christian Schaefer).

Сподіваюся, вам сподобаються ці маленькі ідеї, і виявляться для вас джерелом натхнення!