ÿþ<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>johann-lau.de</title> <style> *, #moon div { -webkit-transition: box-shadow .5s ease-in-out, z-index .25s ease-in-out, opacity .75s ease-in-out, width .75s ease-in-out, height .75s ease-in-out, left .75s ease-in-out, top .75s ease-in-out, color .75s ease-in-out, background-color .75s ease-in-out, padding .75s ease-in-out; -moz-transition: box-shadow .5s ease-in-out, z-index .25s ease-in-out, opacity .75s ease-in-out, width .75s ease-in-out, height .75s ease-in-out, left .75s ease-in-out, top .75s ease-in-out, color .75s ease-in-out, background-color .75s ease-in-out, padding .75s ease-in-out; -o-transition: box-shadow .5s ease-in-out, z-index .25s ease-in-out, opacity .75s ease-in-out, width .75s ease-in-out, height .75s ease-in-out, left .75s ease-in-out, top .75s ease-in-out, color .75s ease-in-out, background-color .75s ease-in-out, padding .75s ease-in-out; transition: box-shadow .5s ease-in-out, z-index .25s ease-in-out, opacity .75s ease-in-out, width .75s ease-in-out, height .75s ease-in-out, left .75s ease-in-out, top .75s ease-in-out, color .75s ease-in-out, background-color .75s ease-in-out, padding .75s ease-in-out; } #sun, #heart, #moon, #bird, #stars { -webkit-transition: box-shadow .125s ease-in-out; -moz-transition: box-shadow .125s ease-in-out; -o-transition: box-shadow .125s ease-in-out; transition: box-shadow .125s ease-in-out; } #grow_up { -webkit-transition: opacity 1.0s ease-in-out, right 2.15s ease-in-out, top 2.15s ease-in-out; -moz-transition: opacity 1.0s ease-in-out, right 2.15s ease-in-out, top 2.15s ease-in-out; -o-transition: opacity 1.0s ease-in-out, right 2.15s ease-in-out, top 2.15s ease-in-out; transition: opacity 1.0s ease-in-out, right 2.15s ease-in-out, top 2.15s ease-in-out; } html { font-size: 62.5%; min-height: 100%; color: #fff; font-family: Georgia; } body { background: #000; margin: 0; } #world { padding: 0px; margin: 0px; font-size: 120%; min-height: 100%; position: relative; height: 8000px; max-width: 600px; margin: auto; overflow: hidden; background-image: -ms-linear-gradient( 90deg, #271701 0%, #573701 1%, #976702 2%, #eed 2%, #74f 25%, #008 40%, #000 100%); background-image: -o-linear-gradient( 90deg, #271701 0%, #573701 1%, #976702 2%, #eed 2%, #74f 25%, #008 40%, #000 100%); background-image: -webkit-linear-gradient( 90deg, #271701 0%, #573701 1%, #976702 2%, #eed 2%, #74f 25%, #008 40%, #000 100%); background-image: -moz-linear-gradient( 90deg, #271701 0%, #573701 1%, #976702 2%, #eed 2%, #74f 25%, #008 40%, #000 100%); background-image: linear-gradient( 90deg, #271701 0%, #573701 1%, #976702 2%, #eed 2%, #74f 25%, #008 40%, #000 100%); background-size: 100% 100%; } a { text-decoration:none; color: #21c; } a:hover, a:focus { text-decoration:underline; color: #108; } #moon { position: absolute; width: 400px; height: 400px; border-radius: 400px; background: #ffffff; top: -120px; left: -120px; box-shadow: inset 0 0 100px #888, 0 0 0 0 #fff, 0 0 30px 0 #fff; } #moon:hover { box-shadow: inset 0 0 25px #f0f0f0, 0 0 40px 5px #fff, 0 0 150px 0px #fff; } #moon div { opacity: 0; font-size: 160%; position: relative; top: 150px; left: 50px; padding: 20px; max-width: 250px; background: #fff; color: #000; border-radius: 30px; box-shadow: inset 2px 2px 10px rgba(255,255,255,0.0), 2px 2px 10px rgba(0,0,0,0.0); text-align: center; } #moon:hover div { opacity: 1; left: 150px; box-shadow: inset 5px 5px 30px rgba(255,255,255,0.95), 2px 2px 10px rgba(0,0,0,0.55); background: #f8f8f8; } #sun { position: absolute; width: 250px; height: 250px; border-radius: 250px; background: #f8e010; box-shadow: inset -20px -20px 50px #ffa000, inset 0 0 0 #ffa000, 0 0 0 0 #ffd000, 0 0 20px 0 #f8e010; } #sun:hover { position: absolute; background: #ffe020; box-shadow: inset 50px 50px 150px #fff8c0, inset -10px -10px 50px #ffb000, 0 0 50px 15px #fff020, 0 0 100px 20px #ffd000; } #sun:hover:after { opacity: 0.9; content: "Photos"; font-size: 40px; color: #e0c000; text-align: center; display: inline-block; position: relative; top: 100px; left: 65px; } #heart { background-image: url('http://pub.johann-lau.de/heart.png'); width: 120px; height: 120px; background-size: 100%; position: fixed; } #heartL, #heartR { width: 60px; height: 120px; position: absolute; opacity: 0; cursor: pointer; } #heartL:hover, #heartR:hover { opacity: 1; } #heartL { background-image: url('http://pub.johann-lau.de/heart_L.png'); } #heartR { background-image: url('http://pub.johann-lau.de/heart_R.png'); background-position: 60px; left: 60px } #grow_up { background-image: url('http://pub.johann-lau.de/kung_foo.png'); width: 280px; height: 239px; background-size: 100%; position: fixed; bottom: 0; opacity: 0; } #stars { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-image: url('http://pub.johann-lau.de/milky_way.png'); } #bird { position: absolute; bottom: 25.45%; left: 30px; width: 96px; height: 96px; background-image: url('http://pub.johann-lau.de/bird.png'); background-size: 100%; } #bird div, #flowersL div, #flowersR div { z-index: -1; background: #fff; color: #222; padding: 8px; border-radius: 11px; opacity: 0; position: absolute; bottom: 50px; font-size: 20px; text-align: center; border: 2px solid #000; box-shadow: 1px 1px 0px rgba(0,0,0,0.35), inset -2px -2px 5px -2px #000; } #bird > div { font-size: 50px; bottom: 75px; left: 60px; height: 60px; width: 60px; padding: 6px; border-radius: 11000px; } #bird div div, #bird div object { z-index: -1; opacity: 0; } #bird:hover > div, #bird div:hover div, #bird div:hover object, #flowersL:hover div, #flowersR:hover div { opacity: 1; z-index: 1000; } #branch { position: absolute; bottom: 25%; left: -1%; width: 238px; height: 125px; background-image: url('http://pub.johann-lau.de/branch_bare.png'); } #branch_yay { opacity: 0; position: absolute; bottom: 0; left: 0; width: 238px; height: 125px; background-image: url('http://pub.johann-lau.de/branch.png'); } #flowers { position: absolute; bottom: 2%; left: 17%; width: 136px; height: 100px; background-image: url('http://pub.johann-lau.de/2flowers.png'); } #flowersL { position: absolute; top: 40px; left: 20px; width: 20px; height: 20px; } #flowersR { position: absolute; top: 28px; right: 34px; width: 20px; height: 20px; } #scrollme { position: absolute; text-align: center; font-size: 40px; width: 100%; bottom: 0.3em; text-shadow: 3px 3px 1px #000; } #scrollme img { position: fixed; bottom: 5px; right: 10px; cursor: pointer; opacity: 0.2; } #scrollme img:hover { opacity: 1.0; } #debug { ddisplay: none; position: fixed; bottom: 10px; left: 5%; color: #000; background: #f0f0f0 url('http://pub.sandboxx.org/stripes.php/w=16~h=16~d=0.5~e8e8e8.4~f8f8f8.4~r=2') repeat ; width: 260px; } </style> </head><body> <div id="world"> <div id="stars"></div> <div id="grow_up"></div> <div id="heart"> <div id="heartL" onclick="heart_click_down();"></div> <div id="heartR" onclick="heart_click_up();"></div> </div> <a href="http://slideshow.johann-lau.de/" id="sun"></a> <div id="moon"> <div> my stuff is actually here:<br><a href="http://sandboxx.org/johann/">sandboxx.org/johann/</a><br><br>:) </div> </div> <div id="branch"><div id="branch_yay"></div></div> <div id="bird"><div>&#9835;<div><object type="application/x-shockwave-flash" data="http://sandboxx.org/_pub/player_mp3_multi.swf" width="280" height="350" wmode="transparent"><param name="movie" value="http://sandboxx.org/_pub/player_mp3_multi.swf" /><param value="transparent" /><param name="FlashVars" value="playlist=http://sandboxx.org/johann/folder/music/output/playlist/&width=280&height=350&showvolume=1&shuffle=1&sliderwidth=5&sliderheight=20&showloading=always&showplaylistnumbers=0&slidercolor1=a0a0a0&slidercolor2=808080&loadingcolor=000000&bgcolor1=f2f2f2&bgcolor2=f4f4f4&buttoncolor=000000&buttonovercolor=0000e0&scrollbarcolor=202020&scrollbarovercolor=0000e0&sliderovercolor=0000e0&bgcolor=f4f4f4&playlistcolor=f4f4f4&textcolor=404040&currentmp3color=000080" /></object></div></div></div> <div id="flowers" onclick="flower_click();"> <div id="flowersL"><div id="blah1">We're just flowers.</div></div> <div id="flowersR"><div id="blah2">??</div></div> </div> <div id="scrollme">go up. <img onclick="scroll_to(0, 0.001);" src="http://pub.johann-lau.de/arrow_up.png"></div> <!-- <div id="debug"> debug </div> --> </div> <script> //http://unscriptable.com/2009/03/20/debouncing-javascript-methods/ Function.prototype.debounce = function (threshold, execAsap) { var func = this, // reference to original function timeout; // handle to setTimeout async task (detection period) // return the new debounced function which executes the original function only once // until the detection period expires return function debounced () { var obj = this, // reference to original context object args = arguments; // arguments at execution time // this is the detection function. it will be executed if/when the threshold expires function delayed () { // if we're executing at the end of the detection period if (!execAsap) func.apply(obj, args); // execute now // clear timeout handle timeout = null; }; // stop any current detection period if (timeout) clearTimeout(timeout); // otherwise, if we're not already waiting and we're executing at the beginning of the detection period else if (execAsap) func.apply(obj, args); // execute now // reset the detection period timeout = setTimeout(delayed, threshold || 100); }; } var scrollees = { '#scrollme' : { 'opacity' : { 'f' : { 0 : 0, 0.982 : 0, 0.985 : 1, '1.0' : 1, }, 's' : '', }, }, '#sun' : { 'opacity' : { 'f' : { 0 : 0, 0.35 : 0.0, 0.4 : 1.0, '1.0' : 1.0, }, 's' : '', }, 'top' : { 'f' : { 0 : 55, 0.5 : 50, '1.0' : 45, }, 's' : '%', }, 'left' : { 'f' : { 0 : 150, 0.35 : 100, 0.8 : -50, '1.0' : -100, }, 's' : '%', }, }, '#heart' : { 'left' : { 'f' : { 0 : 55, 0.4 : 40, 0.5 : 37, 0.6 : 43, 0.75 : 55, '1.0' : 60, }, 's' : '%', }, 'top' : { 'f' : { 0 : 15, 0.05 : 9, 0.1 : 5, 0.2 : 20, 0.4 : 40, 0.6 : 50, 0.9 : 31, '1.0' : 22.5, }, 's' : '%', }, }, '#moon' : { 'opacity' : { 'f' : { 0 : 1, 0.1 : 1, 0.2 : 0, '1.0' : 0, }, 's' : '', }, 'top' : { 'f' : { 0 : -20, '1.0' : -280, }, 's' : 'px', 't' : 'mY', }, 'left' : { 'f' : { 0 : -20, '1.0' : -280, }, 's' : 'px', 't' : 'mX', }, }, '#stars' : { 'opacity' : { 'f' : { 0 : 1, 0.35 : 0.5, 0.5 : 0, '1.0' : 0, }, 's' : '', }, }, '#bird' : { 'bottom' : { 'f' : { 0 : 25.45, 0.75 : 25.45, 0.85 : 30, '1.0' : 30, }, 's' : '%', }, 'left' : { 'f' : { 0 : 30, 0.75 : 30, 0.85 : 50, '1.0' : 100, }, 's' : 'px', }, 'width' : { 'f' : { 0 : 96, 0.75 : 96, 0.85 : 50, '1.0' : 50, }, 's' : 'px', }, 'height' : { 'f' : { 0 : 96, 0.75 : 96, 0.85 : 50, '1.0' : 50, }, 's' : 'px', }, }, '#branch_yay' : { 'opacity' : { 'f' : { 0 : 1, 0.75 : 1, 0.751 : 0, 0.85 : 0, '1.0' : 0, }, 's' : '', }, }, '#grow_up' : { 'opacity' : { 'f' : { 0 : 1, 0.05 : 1, 0.06 : 0, '1.0' : 0, }, 's' : '', }, 'bottom' : { 'f' : { 0 : 0, 0.10 : 0, 0.17 : -250, '1.0' : -250, }, 's' : 'px', 't' : 'mX', }, 'right' : { 'f' : { 0 : 0, 0.1 : 0, 0.17 : -280, '1.0' : -280, }, 's' : 'px', 't' : 'mY', }, }, }; window.onscroll = scrolll; document.onmousemove = scrolll; function scrolll(e) { var frac_sY = (window.pageYOffset) / (document.body.offsetHeight - window.innerHeight); var frac_sX = (window.pageXOffset) / (document.body.offsetWidth - window.innerWidth); if (e.clientX || e.clientY) { var mouse_x_pos = e.clientX; var mouse_y_pos = e.clientY; } var frac_mX = mouse_x_pos / window.innerWidth; var frac_mY = mouse_y_pos / window.innerHeight; /* document.getElementById('debug').innerHTML = '<table>' + '<tr><td>frac_sY</td><td>' + frac_sY + '</tr></td>' + '<tr><td>frac_mX</td><td>' + frac_mX + '</tr></td>' + '<tr><td>frac_mY</td><td>' + frac_mY + '</tr></td>' + '</table>'; */ //alert(mouse_x_pos + ' / ' + mouse_y_pos); for (var classname in scrollees) { var el = document.querySelectorAll(classname); for (var i in el) { if (el[i] && el[i].style /* the necessity of the latter for this to run tells me I'm making some noob mistake :) */) { var scrollee = scrollees[classname]; for (var prop in scrollee) { var frac, frame_frac, val, lower = '', upper = '', lower_frame = '', upper_frame = ''; var property = scrollee[prop]; if ((property['t'] != 'mX' && property['t'] != 'mY') || (e.clientX || e.clientY)) { if (property['t'] === undefined || property['t'] == 'sY') { frac = frac_sY; } else if (property['t'] == 'sX') { frac = frac_sX; } else if (property['t'] == 'mX') { frac = frac_mX; } else if (property['t'] == 'mY') { frac = frac_mY; } if (property['last'] === undefined || property['last'] != frac) { // get appplicable frames var frames = property['f']; for (var frame in frames) { if (frame <= frac) { lower = frames[frame]; lower_frame = frame; } if (frame >= frac && upper === '') { upper = frames[frame]; upper_frame = frame; } } if (upper === '') { upper = lower; upper_frame = lower_frame; } if (upper == lower) { val = lower; } else { frame_frac = (frac - lower_frame) / (upper_frame - lower_frame); val = lower * ( 1.0 - frame_frac) + upper * frame_frac; } if (property['s'] == 'px') { val = Math.round(val); } el[i].style[prop] = val + property['s']; } property['last'] = frac; } } } } } } var flower_clicks = 0; function flower_click() { flower_clicks++; if (flower_clicks >= 3) { document.getElementById('blah1').innerHTML = 'Leave us alone :('; document.getElementById('blah2').innerHTML = '!!'; } } function heart_click_up() { var frac_sY = (window.pageYOffset) / (document.body.offsetHeight - window.innerHeight); // ground to bird if (frac_sY > 0.9) { scroll_to(0, 0.74); } // bird to sun else if (frac_sY > 0.7) { scroll_to(0, 0.52); } // sun to moon else if (frac_sY > 0.015) { scroll_to(0, 0.0); } else { // nop } } function heart_click_down() { var frac_sY = (window.pageYOffset) / (document.body.offsetHeight - window.innerHeight); if (frac_sY > 0.9) { // nop } // bird to ground else if (frac_sY > 0.7) { scroll_to(0, 1.001); } // sun to bird else if (frac_sY > 0.5) { scroll_to(0, 0.74); } // moon to sun else { scroll_to(0, 0.52); } } scroll_timeout = null; function scroll_to(dest_x, dest_y) { var frac_sY = (window.pageYOffset) / (document.body.offsetHeight - window.innerHeight); var scrolled = false; var diff = Math.abs(frac_sY - dest_y); if (diff > 0.0025) { if (frac_sY > dest_y) { window.scrollBy(0, -10 + -diff * 100); scrolled = true; } else if (frac_sY < dest_y) { window.scrollBy(0, 10 + diff * 100); scrolled = true; } } if (scrolled) { scroll_timeout = setTimeout(function() { scroll_to(dest_x, dest_y); }, 5); } else { clearTimeout(scroll_timeout); } } window.addEventListener('DOMContentLoaded',function(){ window.scroll(0, 8000); //scrolll(); },false); </script> <!-- Piwik --> <script type="text/javascript"> var pkBaseURL = (("https:" == document.location.protocol) ? "https://piwik.sandboxx.org/" : "http://piwik.sandboxx.org/"); document.write(unescape("%3Cscript src='" + pkBaseURL + "piwik.js' type='text/javascript'%3E%3C/script%3E")); </script><script type="text/javascript"> try { var piwikTracker = Piwik.getTracker(pkBaseURL + "piwik.php", 8); piwikTracker.trackPageView(); piwikTracker.enableLinkTracking(); } catch( err ) {} </script><noscript><p><img src="http://piwik.sandboxx.org/piwik.php?idsite=8" style="border:0" alt="" /></p></noscript> <!-- End Piwik Tracking Code --> </body></html>