Open MagicVox.net
JavaScriptを使ってテキストをWeb2.0的に(?)水面に反射したようなグラデーションで表示します。 大量のDIV要素を作っているだけで実用性は多分ありません。
Windows XP と Firefox 1.5、Internet Explorer 6.0, Opera 9.1.0, Netscape 7.1 で動作確認済みです。ライセンスは GPL としますのでお好きにどうぞ。
<style>
#web20 { position: relative; font-size: 40px; }
.o { position: absolute; top: 0px; }
.a { position: absolute; width: 100%; height: 1px; overflow: hidden; }
.b { position: absolute; }
</style>
<div id="web20"></div>
<script type="text/javascript">
function web20nize (text) {
var web20 = document.getElementById('web20');
web20.innerHTML = ' ';
var size = web20.offsetHeight;
var html = '<div class="o">' + text + '</div>';
for (var y = 0; y < size; y++) {
var c = Math.floor (360 / size * y);
c = c < 0 ? 0 : (255 < c ? 255 : c);
html += '<div class="a" style="top:'+(y+size)+'px;">';
html += ' <div class="b" style="top: '+(y-size)+'px; color: rgb('+c+','+c+','+c+');">';
html += text;
html += ' </div>';
html += '</div>';
}
web20.innerHTML = html;
}
function startClock () {
web20nize (new Date ());
setTimeout ("startClock()", 1000);
}
startClock ();
</script>
English