Creando cuenta regresiva para navidad con CSS3 y JQuery

Por: Fecha de publicación: Numero de comentarios: 5 Comentarios.

navidad 3 Creando cuenta regresiva para navidad con CSS3 y JQuery

Hoy vamos a jugar un poco con CSS3 y un par de plugins de jQuery para crear la cuenta regresiva para una de las fechas más esperadas por muchos: La Navidad. Asi que no se diga más y veamos un poco de código.

Lo primero que haremos será crear nuestra estructura HTML, la cual como se podrán dar cuenta será súper básica: en ella podemos ver dos contenedores un div llamado mensaje y otro llamado cuenta-regresiva. Mensaje contendrá un texto que dirá “Se acerca la Navidad” y en cuenta-regresiva tendremos valga la redundancia nuestra cuenta regresiva.

<!DOCTYPE html>
<html>
<head>

   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <meta name="description" content="Cuenta regresiva para la navidad hecha con CSS3 y Jquery" />

   <title>Cuenta regresiva para navidad con CSS3 y JQuery</title>

</head>

<body>

   <div id="mensaje"><h1>Se acerca la Navidad</h1></div>
   <div id="cuenta-regresiva"></div>

</body>
</html>

Una vez creada la estructura básica, usaremos un plugin de JQuery para lo que será nuestra cuenta regresiva, exsisten varios, yo opte por uno llamado Countdown el cual es muy configurable además de que lo podemos encontrar adaptado en varios idiomas. Lo primero que haremos será cargar las librerías jQuery para nuestra cuenta regresiva.

<!-- Estilos y Scripts -->
   <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>
   <script type="text/javascript" src="js/jquery.countdown-es.js" charset="utf-8"></script>

Basicamente estamos cargando la la libreria JQuery, el plugin y finalmente la extención del plugin que nos permitira mostrar el contador en español. Usarlo es muy sencillo, para eso hagamos uso de uno de los ejemplos que el Plugin Countdown nos ofrece en su documentación, claro un poco tocado por mi pero que practicamente es igual a su ejemplo.

<script type="text/javascript">
      $(function () {
          newYear = new Date(2011, 12 - 1, 24);
          $('#cuenta-regresiva').countdown({until: newYear,layout: '<div id="cuenta">{dn} {dl} {hn} {hl} {mn} {ml} {sn} {sl}</div>'});
      });
   </script>

Estamos creando una variable llamada newYear a la cual le asignaremos una fecha que en este caso sera 24 de diciembre del 2011, la cual se pone como lo indica la documentación del plugin. finalmente accedemos al contenedor cuenta-regresiva previamente creado, en el se vera reflejado la cuenta regresiva,  si se dan cuenta hay una propiedad llamada layout, esta nos permite crear nuestros propia estructura a la hora de mostrar:

  • Numero de días{dn}
  • Texto de los días {dl}
  • Numero de horas {hn}
  • Texto de las horas {hl}
  • Numero de minutos {mn}
  • Texto de los minutos {ml}
  • Numero de segundos {sn}
  • Texto de los segundo {sl}

 

Si lanzamos nuestro archivo HTML en nuestro navegador podemos ver este resultado, el cual dicho sea de paso es muy soso.

navidad Creando cuenta regresiva para navidad con CSS3 y JQuery

Como vemos nuestro contador ya esta funcionando pero aun es muy simple y aburrido así que vamos a darle un poco de vida y estilo navideño, para ello lo primero que haremos será crear una hoja de estilo a la cual le pondremos jquery.countdown.css, agregamos el siguiente código CSS.

/*Estilo para cuenta regresiva */
body{
	margin:0px;
}

@font-face {
	font-family: 'BlackRoseRegular';
	src: url('fonts/BLACKR-webfont.eot');
	src: url('fonts/BLACKR-webfont.eot?#iefix') format('embedded-opentype'),
	     url('fonts/BLACKR-webfont.woff') format('woff'),
	     url('fonts/BLACKR-webfont.ttf') format('truetype'),
	     url('fonts/BLACKR-webfont.svg#BlackRoseRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}

#mensaje h1{
	font-family: 'BlackRoseRegular';
	font-size:4.7em;
	width:394px;
	height:150px;
	letter-spacing: 1px;
	line-height:88px;
	margin: 180px 0px 0px 74px;
	clear:both;
	color: #fff;
	text-shadow:0 0 10px black;
}

.no-textshadow h1{
		text-shadow:0 0 10px black;
}
#cuenta{
	width:100%;
	height:100%;
	font-family:'BlackRoseRegular';
	font-size:4.5em;
	position: relative;
	top:90px;
	left:20px;
	color: #EE273C;
	text-shadow:
	 -3px -1px 2px #fff,
	  1px -1px 2px #fff,
	 -1px 1px 2px #fff,
	   1px 1px 2px #fff;
}

/* jQuery Countdown styles 1.5.11. */
.hasCountdown {
	width:1260px;
	margin: 0px auto;
	color: #ffffff;
	margin: 0px auto;

El código no tiene mayor ciencia pero hay una parte del código que seguramente te va a llamar la atención esta es la propiedad @font-face la cual nos permite utilizar cualquier fuente en el navegador, en lo que a nosotros respecta usaremos una llamada Black Rose la cual adjuntare al final, en la propiedad definida nos aseguramos de cargar diferentes extensiones de la fuente para garantizar que esta funcione en todos los navegadores.

Si vemos el resultado veremos algo como esto.

navidad 21 Creando cuenta regresiva para navidad con CSS3 y JQuery

Ahora tenemos un mejor resultado pero aun le falta algo y ese algo es una imagen de fondo, pueden usar la que ustedes gusten yo usare una que se adecuaba a lo que estaba buscando, aunque con ella tenia un pequeño problema, solo se veía bien en una resolución de 1280 X 800px,  si lo ponía en una pantalla de más resolución probablemente no se vería bien, así que use un plugin de jQuery que permite que una imagen de fondo se adapte a la resolución de la pantalla.

Este plugin se llama Backstretch y su uso es muy sencillo, primero lo  cargamos a nuestro documento HTML, junto con el resto de las librerías ya cargadas.

<!-- Estilos y Scripts -->
   <style type="text/css">@import "jquery.countdown.css";</style>
   <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>
   <script type="text/javascript" src="js/jquery.countdown-es.js" charset="utf-8"></script>
   <script type="text/javascript" src="js/jquery.backstretch.js"></script>

Para su uso vamos a el script que usamos para nuestra cuenta regresiva y agreguemos el siguiente código

$.backstretch("img/navi.png");

Quedando todo nuestro HTML de la siguiente manera

<!DOCTYPE html>
<html>
<head>

   <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
   <meta name="description" content="Cuenta regresiva para la navidad hecha con CSS3 y Jquery" />

   <title>Cuenta regresiva para navidad con CSS3 y Jquery</title>

   <!-- Estilos y Scripts -->
   <style type="text/css">@import "jquery.countdown.css";</style>
   <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script>
   <script type="text/javascript" src="js/jquery.countdown.js"></script>
   <script type="text/javascript" src="js/jquery.countdown-es.js" charset="utf-8"></script>
   <script type="text/javascript" src="js/jquery.backstretch.js"></script>

   <script type="text/javascript">
      $.backstretch("img/navi.png");

      $(function () {
          var newYear = new Date(2011, 12 - 1, 24);
          $('#cuenta-regresiva').countdown({until: newYear,layout: '<div id="cuenta">{dn} {dl} {hn} {hl} {mn} {ml} {sn} {sl}</div>'});
      });
   </script>

</head>

<body>

   <div id="mensaje"><h1>Se acerca la Navidad</h1></div>
   <div id="cuenta-regresiva"></div>

</body>
</html>

Ahora solo nos resta ver el resultado final.

Descargar archivos

Diego Armando

Sigueme en Twitter: @anotherdagou

Apasionado de las nuevas tecnologías que surgen día a día en Internet. Me encanta todo aquello que tiene que ver con el diseño, la creación de interfaces web, redes sociales, y emprendimiento. Hobbies: videojuegos, cine, música, escribir etc. Sueño que mi trabajo sirva de inspiración para los demás.

407 Entradas escritas por: Diego Armando

Comparte este Post con tus amigos

  • http://www.lacasadelmago.es/ Mith

    Genial. Lo he hecho en media hora y de paso he aprendido las dudas esas que tenía pendientes de cómo añadir fuentes externas, cómo usar JQuery, y cómo redimensionar el fondo de imagen. ¡Todo de un plumazo! ¡Aquí una prueba! http://lacasadelmago.es/feliznavidad/

  • Anónimo

    Excelente amigo 

  • anacona16

    Muchas gracias excelente aporte…

  • Paloma García Díaz

    Hola buenos dias, muchisimas gracias por el aporte estoy comenzando a estudiar este tema y me ha dejado clarisimo con este post como realizar una cuenta regresiva y como darle forma pero necesitaria que los dias se pasasen a horas, es decir que el resultado final fuesen horas, minutos y segundos, no lo consigo por más que rastreo códigos y busco soluciones, las pocas veces que me he acercado he terminado por destruirlo todo porque obviamente meto la pata. Podría ayudarme?

  • Anotherdagou

    Disculpa la tardanza: prueba agregando esto

    $(‘#cuenta-regresiva’).countdown({until: newYear,format: ‘HMS’,layout: ‘{hn} {hl} {mn} {ml} {sn} {sl}’});

    saludos