THE SANDBOX

the description

The text below will fade to white over the next 10 years, starting on July 21, 2010.

the implementation

the code, pt. 1

I used a very simple php script to calculate where in time we are between the start and end dates, and a corresponding RGB value (between 0 [black] and 255 [white]). The last line is a fail-safe that says that $rgb can never be more than 255, so it will just stay at white after the end date. I then simply added an inline style to the containing div and echoed the calculated value in an rgb color style.

<?php

	$start = strtotime('12 July 2010');
	$ahora = strtotime('now');
	$end = strtotime('12 July 2020');

	$duration = $end - $start;
	$time_remaining = $end - $ahora;
	$ratio = $time_remaining / $duration;

	$rgb = 255 - round($ratio * 255);

	if($rgb > 255) $rgb = 255;

?>

the code, pt. 2

Just for fun, I decided to make the text nearly unreadable once it turned white. Rather than just having it fade color, I wanted it to be all but gone entirely from the page.

The first thing I would do to see white text against a white background would be to highlight it. So to circumvent this, I added a small javascript file that disallows highlighting the text that I got from here, then added an inline style making the cursor into the default shape so you're not even tempted to click on the text.

Next, I would look at the source code, which is always an easy way to check out hidden elements. So I pasted each individual paragraph of the poem (which I got from here) into Hivelogic's Enkoder which transforms the source code into human unreadable javascript encoded text.

There are about a dozen other ways I could think of checking the page's text, but I decided to stop there. This is all painfully unnecessary and hardly effective, but I think it adds a bit of fun to an otherwise dull process.

Since none of this extra code is mine, I won't post it here. You can go to the respective sites to see examples if you really want to.