Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

July 27 2012

08:00

A Collection of Mesmerizing Rain Photography


  

Whilst we all enjoy a nice sunny day, rain can result in some really interesting photography. There is something inherently emotive about rain, as the tirade of water is at the same time cleansing and intensely life giving.

Generally speaking, whilst rain can be disheartening or cold for us, rain photography focuses on the romantic side of the weather. It’s also visually very impressive, as the splattering rain drops accentuate the forms which they land upon.

Today we present a mesmerizing collection of rain photography, showing the true beauty of rain and the variety of moods which it can create.

A Collection of Mesmerizing Rain Photography

Rain by kle-m

Rain Photography

The Rain by ~OjosVerde

Rain Photography

Rain by BartoZ

Rain Photography

Summer Rain by julkusiowa

Rain Photography

Spring Rain by Proxile

Rain Photography

Breakup in the cold nov. rain. by VreauSaAjungLaStele

Rain Photography

rain by olumdenyoksun

Rain Photography

Sunset Rain I… by bep-art

Rain Photography

Rain Dance 02 by fbuk

Rain Photography

Rain-Rain-Rain by LonelyPierot

Rain Photography

Rain by VeLuna

Rain Photography

Rain theme by SielojRamu

Rain Photography

November rain by disposable-heroX

Rain Photography

Boston: The Autumn Rain. by inbrainstorm

Rain Photography

After the Rain by Kyujiko

Rain Photography

iN tHe RaiN by Maxxboyy

Rain Photography

: november rain : by hellfirediva

Rain Photography

Left Alone in the Rain by oO-Rein-Oo

Rain Photography

Dancing Rain by DianaCretu

Rain Photography

February Rain by andreapun

Rain Photography

.: Cold November Rain :. by zZToraZz

Rain Photography

Sun Flakes and Rain by mxaksoy

Rain Photography

Mystery Rain by dansch

Rain Photography

torrential rain by Sordyl

Rain Photography

Rain by Lirkaana

Rain Photography

Singin in the Rain by lilithfirefly

Rain Photography

in the rain by fotolympus

Rain Photography

The unstoppable rain by ex-girlfriend

Rain Photography

mondays. rain IV by mbdsgn

Rain Photography

rain by Borderkowa

Rain Photography

pure magic by Magson

Rain Photography

the seething rain by alunaticloner

Rain Photography

We are walking in the rain… by Brigitte-Fredensborg

Rain Photography

When the Storm Comes by nile-can-too

Rain Photography

Rain and water. by CarolineCherry

Rain Photography

Favorite Photographs?

We hope that you enjoyed the collection of photography today. Feel free to comment and share your favorites. Which photos stand out to you and why?

(rb)

July 12 2010

05:00

Style Your Site According to the Weather with jQuery

By pulling in feed from the Yahoo API with jQuery, you can style your website according to the Weather! Find out how by following this step by step guide. We’ll start by creating four backgrounds for sun, rain, snow and cloudy, then use a clever jQuery script to pull in the forecast. To finish things off, we’ll even create a cool manual override, allowing users to switch through the various themes themselves.

See the weather switcher in action on Jakethelab.com

I recently put this idea into practice on a site I hashed together for my dog Jake. Jakethelab.com is a Tumblr blog where I post random photos and videos from my iPhone. The theme of the site changes depending on the weather, with Jake being the happiest when it’s sunny and cloudy, and not so much when it’s rainy or snowy. I wasn’t brainy enough to code all the Javascript myself, so some scripts from other talented developers were used alongside a few lines of my own basic jQuery. A few people has asked how it was all done, so here’s a brief overview.

Create the themes

Four backgrounds for each weather condition

The four themes of the site were put together as large background images. The same layout is used for each, but the overall theme changes to show the four weather conditions of sunny, rainy, snowy and cloudy.

Fetch the weather feed

$(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);

       });
});

The script that does all the work by fetching the feed from Yahoo is courtesy of Justin Shearer from Graphically Herding the Masses. Justin’s post takes the API to a more advanced level and creates a complete weather widget. For our site we only need part of the code, and the rest is modified to suit.

With our weather being used as a class on the page body, the condition needed encoding to lower case and the spaces removed. This changed the text from this: Partly Cloudy to this: partly-cloudy. Next, the encodedclass variable was then added as a class to the page body, so the HTML would read <body class="partly-cloudy">, which could then be styled up with CSS.

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

If you’re using this code on your own site, you’ll want to change the location of the weather feed. The easiest way to find your location code is to head over to Yahoo weather and check the URL of the RSS feed for your particular location.

Write the CSS styles

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;
}

With the current weather being injected right into our HTML, we can now write some CSS to make the appropriate changes to the website. Here’s where the list of Condition Codes from Yahoo Weather comes in handy because a bunch of classes are used to render each of the four backgrounds. For instance, a class of sunny, fair or hot will show the sunny background image. We don’t tend to get very many tropical storms in the UK, so just the most common conditions are picked out.

Add a manual override

Four buttons for changing the weather condition

Unless a user comes back to your website during every weather condition, they may never see your other themes so I figured it would be cool to add a manual override to allow users to toggle through the weather themselves.

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

A simple list is laid out in HTML. Each list item contains an anchor which we’ll style up into button style graphics.

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;
				}

The buttons are firstly moved into place using absolute positioning. This places them in a fixed position at the top left of the screen. Each anchor is then transformed into a button using CSS image replacement, with each button displaying a simple weather condition icon. Because this feature will only work if the user has Javascript enabled display:none; is used, the buttons will be made visible again by jQuery for those users with JS enabled.

	$('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;
	});

A simple jQuery function is then written for each of the four buttons. When the button is clicked, the current class is removed from the page body and replaced according to whichever button was clicked. return false; disables the default action of the anchor to prevent the page from jumping back to the top.

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});
		});

To finish off the buttons, a nifty piece of code from Nettuts is used to transform the buttons into a floating menu, which slides up and down the page when the user scrolls.

See the weather switcher in action on Jakethelab.com

See it in action on jakethelab.com

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...