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.
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.
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.
