Pagina Coming soon con jQuery Countdown

muchas veces queremos hacer un mantenimiento o algún ajustes en nuestro sitio web y debemos de colocar algún aviso indicando que nuestro sitio esta en mantenimiento y que pronto volveremos a estar online, podemos hacer una imagen diciendo que volveremos en breve o colocar algún texto para hacer este trabajo. Pero hay una opción muy buena para estos casos, es utilizar un plugin de Jquery llamado  jQuery Countdown desarrollado por Keith Wood, este nos mostrara un contador en cuenta regresiva en texto indicando el tiempo que falta para volver.

El día de hoy vamos a hacer un ejercicio practico donde crearemos una pagina Coming Soon o volveremos en breve donde utilizaremos el plugin Jquery Countdown.

Esto es lo que conseguiremos:

coming soon

El HTML

Acá tenemos un documento html normal y básico, en la cabecera tenemos los estilos vinculados junto con un link a las fuentes de google donde utilizaremos la fuente Rum Raisin y también tenemos los scripts que nos harán casi todo el trabajo.

Llamamos al archivo de jquery y el countdown que lo tenemos el los archivos locales en la carpeta js de nuestras carpetas y también utilizamos el script que nos generara dinámicamente los números del conteo,  con sus respectivos id y una clase adicional para todos, entre ellos tenemos lo que se cargara dinámicamente, las variantes para cargar el numero de días, horas, minutos y segundos. Ahora esto se va a cargar en un div dentro del cuerpo del sitio y el div es el <div id=”countdown”> que se encuentra vacío en el body, aquí es donde se cargar el contenido dinámico.

Ahora vamos con los estilos.

Los CSS

Con los estilos ajustamos la parte visual del documento, son estilos básicos donde damos imagen de background, utilizamos fuentes de Google, colores con alfa y speudo-elementos, la posición de los números se generan que se generan dinámicamente esta aplicado el estilo  .timer_numbers y las letras de días, horas, minutos, segundo las generamos con Css, utilizamos el pseudo-elemento :after, y lo ubicamos debajo de las letras, y por ultimos aplicamos estilos para los links de las redes sociales.

Nota: Para modificar el tiempo de espera lo debemos de hacer en el script del <head> en la linea 16, ahi damos el tiempo adecuado y necesitado  (DHMS) dias, horas, minutos y segundos.

Y esto es todo, espero que te sirva de algo este ejercicio, nos vemos en el siguiente.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo

1 Respuesta

  1. louis vuitton dice:

    very well!