Popups poco ortodoxos HTML5

[dual3nigma]

Que tal chicos, no puedo dormir así que les comparto un experimento.

¿Recuerdan cuando hacer popups, modal boxes, como les llamen requerían librerías gigantes con hojas de estilo e imágenes? Pues pronto hacer esta clase de efectos será muy sencillo de hacer como pueden ver en https://github.com/dual3nigma/HTML5-...e/master/popup

Lo cual si lo descargan y abren el índex.html veran algo así:


Solo funciona en webkit, pero seria fácil hacerlo funcionar en ff as well.

Tienen que ver el código para ver lo bueno. Lo que notaran es que estoy utilizando el Flexible Box Layout Module, lo cual hace que el popup se centre automáticamente, así es, no mas onResize events.

Código Stylus:

.nota
    display -webkit-box 
    -webkit-box-align center 
    -webkit-box-pack center
 

Por otro lado odio repetir código, por lo que estoy utilizando una animación con 2 iteraciones alternate y usando el evento webkitAnimationIteration para detener la animación justo cuando va de regreso con la propiedad css "animation-play-state paused".

Código Stylus:

.nota
    -webkit-animation nota-show .4s both alternate 2 
 
    .nota_content  
        -webkit-animation "nota_content-show" .4s both alternate 2 
 
    &.paused  
        -webkit-animation-play-state paused 
 
        .nota_content  
            -webkit-animation-play-state paused
 

Código CoffeScript:

$nota.bind 'webkitAnimationIteration', -> $nota.addClass('paused')
 

Al hacer clic en el overlay quito la clase que tiene esa propiedad y la animació continua "de regreso".

Código CoffeScript:

$nota.bind 'click', (e) -> $nota.removeClass('paused')
 

Sencillo, no?. Echenle un ojo al código, pruebenlo en webkit y comente :D

Esto lo estoy utilizando en una aplicación para iPad en la que estoy trabajando, por eso el fondo de la nota ;)

¡Saludos!