sábado, 29 de septiembre de 2012

Notificaciones cronometradas con CSS3

[caption id="attachment_208" align="aligncenter" width="480"]notificaciones cronometradas con css3 notificaciones cronometradas con css3[/caption]

Un consejo rápido sobre cómo crear algunas notificaciones simples sincronizados con animaciones CSS. La idea es mostrar una notificación con una barra de progreso durante un tiempo específico y luego hacerla desaparecer.

Vamos a ver cómo crear una simple notificación oportuna con animaciones CSS. Vamos a utilizar un indicador de progreso para mostrar cuánto tiempo queda para que el cuadro desaparezca.

Seguramente, usted ya lo vio en alguna parte, yo lo descubrí en la buysellads.com, cuando las notificaciones programadas se muestran es decir, después de salvar a algunos ajustes.

HTML

Para el marcado simplemente tendremos una división con un mensaje en el interior y con una división adicional de la barra de progreso:
<div class="tn-box tn-box-color-1">
<p>Su configuracion se ha guardado satisfactoriamente!</p>
<div class="tn-progress"></div>
</div>

CSS

En el cuadro de la notificación se va a tener las clases tn-box y tn-box-color-1 que se utilizará para definir los diferentes colores. Luego se define el estilo de la caja:
.tn-box {
width: 360px;
position: relative;
margin: 0 auto 20px auto;
padding: 25px 15px;
text-align: left;
border-radius: 5px;
box-shadow:
0 1px 1px rgba(0,0,0,0.1),
inset 0 1px 0 rgba(255,255,255,0.6);
opacity: 0;
cursor: default;
display: none;
}
.tn-box-color-1{
background: #ffe691;
border: 1px solid #f6db7b;

Vamos a configurar el cuadro en display:none y darle 0 a la opacidad.

La barra de progreso tendrá el siguiente estilo:
.tn-progress {
width: 0;
height: 4px;
background: rgba(255,255,255,0.3);
position: absolute;
bottom: 5px;
left: 2%;
border-radius: 3px;
box-shadow:
inset 0 1px 1px rgba(0,0,0,0.05),
0 -1px 0 rgba(255,255,255,0.6);

Inicialmente, la barra tendrá 0 de ancho.

En este ejemplo, estoy usando un botón con una casilla de verificación que comenzará a las animaciones una vez que sea activado.
input.fire-check:checked ~ section .tn-box {
display: block;
animation: fadeOut 5s linear forwards;
}
input.fire-check:checked ~ section .tn-box .tn-progress {
animation: runProgress 4s linear forwards 0.5s;

El botón precede a la sección con los cuadros de notificación para que pueda utilizar el general sibling combinator.

Si usted tal vez desea agregar una clase con JavaScript en su lugar, se podría definir algo como esto:
.tn-box.tn-box-active {
display: block;
animation: fadeOut 5s linear forwards;
}
.tn-box.tn-box-active .tn-progress {
animation: runProgress 4s linear forwards 0.5s;
}

donde tn-box-active es la clase que tu agregas a el div tn-box.

La animacion en si, seria esta:
@keyframes fadeOut {
0% { opacity: 0; }
10% { opacity: 1; }
90% { opacity: 1; transform: translateY(0px);}
99% { opacity: 0; transform: translateY(-30px);}
100% { opacity: 0; }

Parece un "desvanecimiento", pero que en realidad se desvanece la caja en la primera y luego la hace desaparecer y moverse un poco. La animación de la barra de progreso seria así:
@keyframes runProgress {
0% { width: 0%; background: rgba(255,255,255,

0.3); }
100% { width: 96%; background: rgba(255,255,255,1);

Animamos la anchura a 96% (de izquierda fue de 2% en lo que queremos que se detenga el 2% de la derecha también), y la opacidad del valor RGBA.

La duración de la animación de la barra de progreso será un poco inferior a la duración de la animación cuadro, ya que va a empezar más tarde (la caja tiene que desaparecer en primer lugar).

Nota: Lo que pensé que sería bueno, es una pausa de la animación en vuelo estacionario. Esto tiene sentido si el usuario desea tener más tiempo para leer lo que dice la notificación. Pero, por desgracia, parece que hay algunos problemas con broswers WebKit. En Chrome (19.0.1084.56 en Win) la animación se rompe, mientras que en Safari (5.1.5 Win) me sale un informe de accidente en WebKit2WebProcess.exe ... Funciona perfectamente bien en Firefox 12,0.

De todos modos, así es cómo usted podría hacer:
.tn-box.tn-box-hoverpause:hover,
.tn-box.tn-box-hoverpause:hover .tn-progress{
animation-play-state: paused;

Hace falta decir que esto sólo funcionará en los navegadores que soporta CSS Animations! Usted necesitará algún tipo de reserva JS para otros navegadores.

Y eso es todo! Espero que les sea útil!

Demo: Ver                                                Archivos: Descargar

 

2 comentarios: