<-- IE錯誤修正 --> Inspiration for Dialog Effects - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > PHP / ASP.NET / HTML5 / jQuery > HTML5 = TAG + CSS3 + JavaScript APIs > jQuery 討論區 (jQuery 豐富資源)

jQuery 討論區 (jQuery 豐富資源) 包含 jQuery 有關學習、教學、Frameworks 使用、程式與應用範例等,將集中於此。


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 2015-01-08
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
預設 Inspiration for Dialog Effects

Click the image to open in full size.

View demo Download source

Last year we posted some inspiration for modal window effects and today we’d like to share some fresh ideas with you. Styles and trends change and this calls for different effects that fit to a modern UI. This new set contains some subtle animations and also some more fancy SVG morphing techniques for dialogs.

Please note that this was tested in latest browser versions only.

Please also note that IE11 does not seem to support vieport units in calc() which we use in some of the animation transforms.

For the dialog we use the following markup:


Howdy, I'm a dialog box

< div>Close

</div>Note that in the future we’ll be able to use the native element. But currently support is still very weak, with IE, Firefox and Safari not supporting it.

As you can see, we have a main dialog wrap which contains the overlay and the dialog content. The basic style for the dialog is the following (vendor prefixes are omitted):

.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;}/* Content */.dialog h2 { margin: 0; font-weight: 400; font-size: 2em; padding: 0 0 2em; margin: 0;}We use flexbox on the main dialog element in order to center the dialog content. The overlay will appear with a transition. Please note that pointer events don’t work for IE < 11.
Some effects have an additional division for the inner content in order to hide it initially and fade it in after an effect of the modal is finished. This makes sense for effects that scale/distort the dialog.

An example for an effect (Sandra) is the following:

.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); }}Click the image to open in full size.



With adding the dialog--open and dialog--close classes, we can control the appearing of the dialog and its inner elements.

The script for the dialog is the following:

;( 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 on open this.options.onOpenDialog( this ); } this.isOpen = !this.isOpen; }; // add to global namespace window.DialogFx = DialogFx;})( window ); And we can call the dialog like this:

…where our trigger button has the data-attribute data-dialog="somedialog".

For the SVG effects (except the line drawing of Wilma) we use Snap.svg to morph SVG paths. We add the SVG shape into a wrap right into the dialog content and then we define the path to morph to in 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) );})();There seems to be some kind of stacking problem in Safari with the perspective effects. Read more about it here: Weird CSS Rotation Animation Glitch in Safari

We hope you enjoy these little effects and find them inspiring!

Find this project on Github
View demo Download source

Inspiration for Dialog Effects was written by Mary Lou and published on Codrops.



來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
The Design Inspiration 設計師靈感泉源,每日更新免費素材資源網 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2013-11-19 10:25 PM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +8。現在的時間是 03:50 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2019,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2