Вдохновляющие эффекты для диалоговых окон

Вдохновляющие эффекты для диалоговых окон

От автора: Небольшая коллекция вдохновляющих эффектов для диалоговых окон с использованием CSS анимаций. Некоторые эффекты используют SVG анимации, трансформирующие SVG пути с помощью Snap.svg.

скачать исходникидемо

В прошлом году мы создали коллекцию вдохновляющих эффектов для модальных окон, а сегодня мы бы хотели поделиться с вами новыми идеями. Стили и тренды меняются, а это требует создания различных эффектов, которые будут удовлетворять требованиям современного пользовательского интерфейса (UI). Эта новая коллекция содержит несколько изящных анимаций и некоторые классные техники по трансформации SVG для диалоговых окон.

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Для диалогового окна мы используем следующую разметку:

<div id="somedialog" class="dialog">
 <div class="dialog__overlay"></div>
 <div class="dialog__content">
 <h2><strong>Howdy</strong>, I'm a dialog box</h2><
 div><button class="action" data-dialog-close>Close</button></div>
 </div>
</div>

Обратите внимание на то, что в будущем мы сможем использовать нативный (встроенный) элемент <dialog>. Но на данный момент он очень слабо поддерживается браузерами (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.3s;
}
 
.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.3s;
 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 );

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

<script src="js/classie.js"></script>
<script src="js/dialogFx.js"></script>
<script>
 (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) );
 
 })();
</script>

…где у нашей кнопки есть специальный атрибут 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

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее
Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree