Cambiar el fondo de tu blog de acuerdo al clima con jQuery

Un truco muy bueno y que en general no mucha gente usa es la de cambiar el fondo de nuestro blog o sitio web de acuerdo a la hora del día, quizá por la diferencia de horarios y esas cosas, pero en esta ocasión les traigo un tutorial más o menos parecido en el que usando la API de Yahoo! y el uso de jQuery vamos a poder crear un fondo que se cambie automáticamente de acuerdo al clima o eligiéndolo con un menú de climas que se desliza conforme bajas la página, sin duda un tutorial que no se pueden perder. Pueden ver el tutorial terminado en este enlace.

Creando los temas

Antes que nada tenemos que crear los fondos de pantalla para que el efecto funcione, para el tutorial se han creado cuatro fondos distintos.

Configurando el feed del clima

$(document).ready(function() {	

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?p=UKXX0133'",function(data){
            var w=data.query.results.item;
          	var class=w.condition.text;
          	var encodedclass = class.replace(/\s+/g, '-').toLowerCase();

          	$('body').addClass(encodedclass);

       });
});

El siguiente paso consiste en configurar el clima obteniendo la dirección de un feed de Yahoo!, y para poder tener bien el código hay que agregar class=”partly-cloudy” en la etiqueta body de nuestro documento y que al momento de cargar tenga definido un estilo para aplicar.

Para cambiar el clima dependiendo de la ciudad que quieras, Yahoo weather te permite generar el feed de acuerdo al lugar donde menciones, para que pueda coincidir.

Vinculamos la hoja de estilos con la etiqueta <link href=”dirección”>

http://weather.yahooapis.com/forecastrss?p=USNY0996

Implementando el CSS

body.cloudy, body.partly-cloudy, body.mostly-cloudy {
	background: #b3c6e4 url(Cloudy.jpg) fixed center bottom no-repeat;
}
body.rain, body.thunderstorms, body.drizzle, body.showers, body.thundershowers, body.scattered-showers, body.scattered-thunderstorms, body.isolated-thunderstorms {
	background: #9eacaf url(Rainy.jpg) fixed center bottom no-repeat;
}
body.sunny, body.fair, body.hot {
	background: #8cdafe url(Sunny.jpg) fixed center bottom no-repeat;
}
body.snow, body.mixed-rain-and-snow, body.mixed-rain-and-sleet, body.snow-flurries, body.light-snow-showers, body.blowing-snow, body.hail, body.sleet, body.snow-showers, body.heavy-snow {
	background: #889986 url(Snowy.jpg) fixed center bottom no-repeat;
}

Este es el código para configurar los fondos, una vez que ya hemos importado la hoja de estilos podemos configurar los estilos de acuerdo a lo que queremos, en este caso puedes ver que el nombre de las clases no se pueden modificar pero si el estilo, por ejemplo, donde dice Cloudy.jpg, Rainy.jpg, Sunny.jpg y Slowy.jpg pueden ser reemplazados por las direcciones de sus imágenes.

Cambiar fondo manualmente

La primera parte está lista, ahora en teoría se podrá cambiar el fondo automáticamente, pero si en vez de eso quieres agregar una opción para que manualmente se pueda cambiar el fondo vamos a agregar una con el siguiente código:

<ul id="weather">
 	<li class="cloudy"><a href="#">Cloudy</a></li>
 	<li class="sunny"><a href="#">Sunny</a></li>
 	<li class="rainy"><a href="#">Rainy</a></li>
 	<li class="snowy"><a href="#">Snowy</a></li>
 </ul>

 

Con una hoja de estilos así:

ul#weather {
	position: absolute; top: 40px; left: 40px;
	list-style: none; display: none;
}
ul#weather li {
	margin: 0 0 12px 0;
}
ul#weather li a {
	display: block; width: 60px;
	background: url(weather-icons.png) no-repeat; text-indent: -9999px;
}
ul#weather li.cloudy a {
	height: 32px; background-position: 0 0;
}
ul#weather li.sunny a {
	height: 63px; background-position: 0 -43px;
}
ul#weather li.rainy a {
	height: 50px; background-position: 0 -115px;
}
ul#weather li.snowy a {
	height: 48px; background-position: 0 -177px;
}

El código para configurar los botones es en jQuery y lo que hace es remover clases para colocar otras de acuerdo al botón que es seleccionado, pueden ver que el nombre se relaciona con el clima que se quiere cambiar.

	$('ul#weather').show();

	$('li.cloudy').click(function() {
		$('body').removeClass();
		$('body').addClass('cloudy');
		return false;
	});
	$('li.sunny').click(function() {
		$('body').removeClass();
		$('body').addClass('sunny');
		return false;
	});
	$('li.rainy').click(function() {
		$('body').removeClass();
		$('body').addClass('rain');
		return false;
	});
	$('li.snowy').click(function() {
		$('body').removeClass();
		$('body').addClass('snow');
		return false;
	});

Por último basta agregar un código más para que el menú se desplace hacía abajo o arriba de acuerdo a la posición de la pantalla, para que no se oculte jamás.

var name = "#weather";
    var menuYloc = null;
   	menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))  

   		$(window).scroll(function () {
   			var offset = menuYloc+$(document).scrollTop()+"px";
   			$(name).animate({top:offset},{duration:500,queue:false});
		});

 

Y con esto terminamos el tutorial, si lo ven de reojo pensarán que está difícil, sin embargo lo más difícil podría ser el código del clima y los últimos códigos, de todas formas  ya saben que cualquier duda pueden comentarla.

Vía line25