Notificación de Pop From Top | Programar Plus

¿Has visto ese patrón de diseño en el que aparece una notificación desde la parte superior de la ventana del navegador y luego desaparece? Podemos rockear eso en CSS puro.

Ver demostración Descargar archivos

Solo haremos un div:

<div id="note">
    You smell good.
</div>

Luego le daremos estilo y lo pondremos en la parte superior de la pantalla:

#note {
    position: absolute;
    z-index: 101;
    top: 0;
    left: 0;
    right: 0;
    background: #fde073;
    text-align: center;
    line-height: 2.5;
    overflow: hidden; 
    -webkit-box-shadow: 0 0 5px black;
    -moz-box-shadow:    0 0 5px black;
    box-shadow:         0 0 5px black;
}

Vamos a animarlo

Con una animación de fotogramas clave, podemos “ocultarlo” sobre la ventana del navegador y bajarlo por un momento:

@-webkit-keyframes slideDown {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

Er … consideremos otros navegadores rápidamente

Pero consideremos los navegadores que no tienen transformaciones y animaciones por un segundo. Para esos, nos gustaría que de forma predeterminada solo se muestre la barra de notificaciones en todo momento, con la capacidad de descartarla.

Así que haremos una compilación personalizada de Modernizr para probar transformaciones y animaciones, cargar eso, luego podemos escribir CSS para probar esas características y solo disparar las animaciones si estamos en un navegador que las admita.

.cssanimations.csstransforms #note {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

El 1.0s hay un retraso antes de que se ejecute la animación. Es mejor esperar un minuto para que la notificación sea más notoria.

Ahora agregaremos un botón de cierre en el HTML:

<div id="note">
    You smell good. <a id="close">[close]</a>
</div>

Y un poquito de JavaScript en la parte inferior de la página para que los navegadores no compatibles puedan cerrar la notificación.

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

Mira mamá, no hay bibliotecas.

Como no necesitamos ese botón de cierre en los navegadores que admiten las animaciones, lo ocultaremos:

.cssanimations.csstransforms #close {
  display: none;
}

Para el registro, esto debería funcionar bien en navegadores móviles (probado Mobile Safari). No se usa un posicionamiento fijo aquí, solo absoluto, y eso será un problema menor de todos modos (es posible que desee considerar arreglarlo para que incluso si el usuario se desplaza hacia abajo en la página, lo obtendrá).

Disfrutar

Ver demostración Descargar archivos