Надихаючі ефекти для діалогових вікон

13

Від автора: Невелика колекція надихаючих ефектів для діалогових вікон з використанням CSS анімацій. Деякі ефекти використовують SVG анімації, трансформують SVG шляху з допомогою Snap.svg.

Надихаючі ефекти для діалогових віконНадихаючі ефекти для діалогових вікон

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

Будь ласка, зверніть увагу на те, що дані ефекти були протестовані лише в останніх версіях браузерів.

А також, будь ласка, зверніть увагу на те, що IE11, здається, не підтримує використання одиниць вимірювання області перегляду (viewport) у функції calc(), яку ми використовуємо в деяких анімаційних трансформаціях.

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

Howdy, i’m a dialog box

Close

Зверніть увагу на те, що в майбутньому ми зможемо використовувати нативний (вбудований) елемент . Але на даний момент він дуже слабо підтримується браузерами (IE, Firefox і Safari не підтримують його).

Як ви могли помітити, у нас є основний блок-обгортка для діалогового вікна, в якому розміщені блок з підкладкою (шар з затемненням) і блок з контентом. Базові стилі для діалогового вікна виглядають наступним чином (вендорные префікси опущені):

.dialog,
.dialog__overlay {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.dialog {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.dialog__overlay {
position: absolute;
z-index: 1;
background: rgba(55, 58, 71, 0.9);
opacity: 0;
transition: opacity 0.3 s;
}
.dialog—open .dialog__overlay {
opacity: 1;
pointer-events: auto;
}
.dialog__content {
width: 50%;
max-width: 560px;
min-width: 290px;
background: #fff;
padding: 4em;
text-align: center;
position: relative;
z-index: 5;
opacity: 0;
}
.dialog—open .dialog__content {
pointer-events: auto;
}
/* Вміст */
.dialog h2 {
margin: 0;
font-weight: 400;
font-size: 2em;
padding: 0 0 2em;
margin: 0;
}

Ми використовуємо модуль flexbox для головного діалогового елемента, щоб відцентрувати контент в діалоговому вікні. Підкладка з’явиться разом з переходом. Зверніть увагу на те, що властивість pointer-events не працює в IE < 11.

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

Приклад ефекту під назвою Sandra:

.dialog.dialog—open .dialog__content,
.dialog.dialog—close .dialog__content {
animation-duration: 0.3 s;
animation-fill-mode: forwards;
}
.dialog.dialog—open .dialog__content {
animation-name: anim-open;
}
.dialog.dialog—close .dialog__content {
animation-name: anim-close;
}
@keyframes anim-open {
0% { opacity: 0; transform: scale3d(1.1, 1.1, 1); }
100% { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes anim-close {
0% { opacity: 1; }
100% { opacity: 0; transform: scale3d(0.9, 0.9, 1); }
}

Шляхом додавання класів dialog—open і dialog—close ми можемо контролювати появу діалогового вікна і розташованих у ньому елементів.

Скрипт для діалогового вікна буде наступним:

;( function( window ) {
‘use strict’;
var support = { animations : Modernizr.cssanimations },
animEndEventNames = { ‘WebkitAnimation’ : ‘webkitAnimationEnd’, ‘OAnimation’ : ‘oAnimationEnd’, ‘msAnimation’ : ‘MSAnimationEnd’, ‘animation’ : ‘animationend’ },
animEndEventName = animEndEventNames[ Modernizr.prefixed( ‘animation’ ) ],
onEndAnimation = function( el, callback ) {
var onEndCallbackFn = function( ev ) {
if( support.animations ) {
if( ev.target != this ) return;
this.removeEventListener( animEndEventName, onEndCallbackFn );
}
if( callback && typeof callback === ‘function’ ) { callback.call(); }
};
if( support.animations ) {
el.addEventListener. ( animEndEventName, onEndCallbackFn );
}
else {
onEndCallbackFn();
}
};
function extend( a, b ) {
for( var key in b ) {
if( b.hasOwnProperty( key ) ) {
a[key] = b[key];
}
}
return a;
}
function DialogFx( el, options ) {
this.el = el;
this.options = extend( {}, this.options );
extend( this.options, options );
this.ctrlClose = this.el.querySelector( ‘[data-dialog-close]’ );
this.isOpen = false;
this._initEvents();
}
DialogFx.prototype.options = {
// callbacks
onOpenDialog : function() { return false; },
onCloseDialog : function() { return false; }
}
DialogFx.prototype._initEvents = function() {
var self = this;
// close action
this.ctrlClose.addEventListener. ( ‘click’, this.toggle.bind(this) );
// esc key closes dialog
document.addEventListener. ( ‘keydown’, function( ev ) {
var keyCode = ev.keyCode || ev.which;
if( keyCode === 27 && self.isOpen ) {
self.toggle();
}
} );
this.el.querySelector( ‘.dialog__overlay’ ).addEventListener. ( ‘click’, this.toggle.bind(this) );
}
DialogFx.prototype.toggle = function() {
var self = this;
if( this.isOpen ) {
classie.remove( this.el, ‘dialog—open’ );
classie.add( self.el, ‘dialog—close’ );
onEndAnimation( this.el.querySelector( ‘.dialog__content’ ), function() {
classie.remove( self.el, ‘dialog—close’ );
} );
// callback on close
this.options.onCloseDialog( this );
}
else {
classie.add( this.el, ‘dialog—open’ );
// callback-функція при відкритті
this.options.onOpenDialog( this );
}
this.isOpen = !this.isOpen;
};
// додавання до глобального простору імен
window.DialogFx = DialogFx;
})( window );

А викликати діалогове вікно можна ось так:

(function() {
var dlgtrigger = document.querySelector( ‘[data-dialog]’ ),
somedialog = document.getElementById( dlgtrigger.getAttribute( ‘data-dialog’ ) ),
dlg = new DialogFx( somedialog );
dlgtrigger.addEventListener. ( ‘click’, dlg.toggle.bind(dlg) );
})();

…де у нашої кнопки є спеціальний атрибут data-dialog=»somedialog».

Для SVG ефектів (за винятком малювання лінії у прикладі під назвою Wilma) ми використовуємо Snap.svg для трансформації SVG шляхів. Ми додаємо SVG фігуру всередині обгортки прямо в контент діалогового вікна, а потім визначаємо шлях, який потрібно змінити в data-morph-open.

(function() {
var dlgtrigger = document.querySelector( ‘[data-dialog]’ ),
somedialog = document.getElementById( dlgtrigger.getAttribute( ‘data-dialog’ ) ),
// svg..
morphEl = somedialog.querySelector( ‘.morph-shape’ ),
s = Snap( morphEl.querySelector( ‘svg’ ) ),
path = s.select( ‘path’ ),
initialPath = path.attr(‘d’),
steps = {
open : morphEl.getAttribute( ‘data-morph-open’ )
},
dlg = new DialogFx( somedialog, {
onOpenDialog : function( instance ) {
// reset path
morphEl.querySelector( ‘svg > path’ ).setAttribute( ‘d’, initialPath );
// animate path
path.stop().animate( { ‘path’ : steps.open }, 300, mina.easein );
}
} );
dlgtrigger.addEventListener. ( ‘click’, dlg.toggle.bind(dlg) );
})();

Здається, є деяка проблема з накладенням в браузері Safari при роботі з ефектами, що використовують перспективу.

Ми сподіваємося, що вам сподобалися ці ефекти і вони надихнули вас на створення чого-небудь схожого!

Подивіться репозиторій на Github