Experiment #2: Drunk
Select a level of drunkenness below to activate. Lower levels are more subtle, while the highest levels are... well, not. Wait a few seconds for visual effects to start kicking in. Switch drunkenness level while the effect is enabled to see how the different levels look. This experiment has a higher-than-average chance of breaking the layout or causing other browser weirdness and might be too processor-intensive for your phone to render smoothly.
To see these effects put to good(?) use, play Zombie Nightclub Hoedown and order a bunch of drinks from the bartender in the game.
Source
-
Warning (2) : file_get_contents(/home/phanto41/public_html/phantomwatson/src/templates/element/Experiments/drunk.php): Failed to open stream: No such file or directory [in /home/phanto41/public_html/phantomwatson/templates/Experiments/drunk.php, line 41]<?php /* Assumes page content is wrapped in <div id="content"></div> */ ?>
-
var drunk = { wobbliesTilt: null, wobbliesScale: null, level: 0, init: function () { $('#content').wrapInner('<div id="wrapper-tilt"></div>'); $('#wrapper-tilt').wrapInner('<div id="wrapper-scale"></div>'); drunk.level = $('#drunk-level').val(); $('#disable-drunk').hide(); $('#enable-drunk').click(function (event) { drunk.startWobblies(); drunk.enableBlurries(); $('#disable-drunk').show(); $('#enable-drunk').hide(); }); $('#disable-drunk').click(function (event) { drunk.stopWobblies(); drunk.disableBlurries(); $('#disable-drunk').hide(); $('#enable-drunk').show(); }); $('#drunk-level').change(function () { drunk.level = $(this).val(); drunk.setBlurries(); }); }, startWobblies: function () { $('html').addClass('wobblies-enabled'); var delay = 500 + (Math.random() * 5000); setTimeout('drunk.switchDrunkTilt(' + drunk.level + ')', delay); var delay = 500 + (Math.random() * 3000); setTimeout('drunk.switchDrunkScale(' + drunk.level + ')', delay); }, stopWobblies: function () { $('html').removeClass('wobblies-enabled'); // Clear tilt if (this.wobbliesTilt) { clearTimeout(this.wobbliesTilt); } $('#wrapper-tilt').addClass('stop-wobblies'); // Clear scale if (this.wobbliesScale) { clearTimeout(this.wobbliesScale); } $('#wrapper-scale').addClass('stop-wobblies'); }, enableBlurries: function () { $('html').addClass('blurries-enabled'); this.setBlurries(); }, setBlurries: function () { $('body').removeClass(); $('body').addClass('drunk-text-' + drunk.level); }, disableBlurries: function () { $('html').removeClass('blurries-enabled'); }, switchDrunkTilt: function () { var wrapper = $('#wrapper-tilt'); var classA = 'drunk-tilt-' + drunk.level + 'a'; var classB = 'drunk-tilt-' + drunk.level + 'b'; if (wrapper.hasClass(classA)) { wrapper.removeClass(classA); wrapper.addClass(classB); } else { wrapper.removeClass(classB); wrapper.addClass(classA); } var delay = 8000 + (Math.random() * 5000); this.wobbliesTilt = setTimeout('drunk.switchDrunkTilt(' + drunk.level + ')', delay); }, switchDrunkScale: function () { var wrapper = $('#wrapper-scale'); var maxScaleLevel = Math.floor(drunk.level / 2) - 1; var scaleLevel = this.randomFromTo(0, maxScaleLevel); var negative = (Math.random() < .5); var newClass = 'drunk-scale-'; if (negative && scaleLevel > 0) { newClass += 'n'; } newClass += scaleLevel; wrapper.removeClass(); wrapper.addClass(newClass); var delay = 5000 + (Math.random() * 8000); this.wobbliesScale = setTimeout('drunk.switchDrunkScale(' + drunk.level + ')', delay); }, randomFromTo: function(from, to) { return Math.floor(Math.random() * (to - from + 1) + from); } }; -
body { transition: text-shadow 2s; } #wrapper-tilt { transition: transform 10s; } #wrapper-scale { transition: all 10s; } .blurries-enabled .drunk-text-2 { text-shadow: 0px 0px 0.1em #A7DF99; } .blurries-enabled .drunk-text-3 { text-shadow: 2px 2px 0.5em #A7DF99; } .blurries-enabled .drunk-text-4 { text-shadow: 2px 2px 0.5em #A7DF99, 5px 5px 0.3em #A7DF99; } .blurries-enabled .drunk-text-5 { text-shadow: 2px 2px 0.5em #A7DF99, 10px 5px 0.1em #A7DF99; } .blurries-enabled .drunk-text-6 { text-shadow: 2px 2px 0.9em #A7DF99, 15px 5px 0.09em #A7DF99; } .blurries-enabled .drunk-text-7 { text-shadow: 2px 2px 0.9em #A7DF99, 15px 10px 0.07em #A7DF99; } .blurries-enabled .drunk-text-8 { text-shadow: 2px 2px 0.9em #A7DF99, 10px -10px 0.1em #A7DF99, -20px -100px 0.5em #A7DF99; } .blurries-enabled .drunk-text-9 { text-shadow: 2px 2px 0.9em #A7DF99, 50px -30px 0.06em #A7DF99, -50px 40px 0.1em #A7DF99, -20px -100px 0.5em #A7DF99, 20px 150px 0.9em #A7DF99; } .blurries-enabled .drunk-text-10 { text-shadow: 2px 2px 0.9em #A7DF99, 50px -30px 0.06em #A7DF99, -50px 40px 0.1em #A7DF99, -20px -100px 0.5em #A7DF99, 20px 150px 0.9em #A7DF99, 500px 10px 0.3em #A7DF99, -400px 200px 2em #A7DF99; } .wobblies-enabled .drunk-tilt-4a { transform: rotate(0.3deg); } .wobblies-enabled .drunk-tilt-4b { transform: rotate(-0.3deg); } .wobblies-enabled .drunk-tilt-5a { transform: rotate(0.35deg); } .wobblies-enabled .drunk-tilt-5b { transform: rotate(-0.35deg); } .wobblies-enabled .drunk-tilt-6a { transform: rotate(0.4deg); } .wobblies-enabled .drunk-tilt-6b { transform: rotate(-0.4deg); } .wobblies-enabled .drunk-tilt-7a { transform: rotate(0.5deg); } .wobblies-enabled .drunk-tilt-7b { transform: rotate(-0.5deg); } .wobblies-enabled .drunk-tilt-8a { transform: rotate(0.7deg); } .wobblies-enabled .drunk-tilt-8b { transform: rotate(-0.7deg); } .wobblies-enabled .drunk-tilt-9a { transform: rotate(0.9deg); } .wobblies-enabled .drunk-tilt-9b { transform: rotate(-0.9deg); } .wobblies-enabled .drunk-tilt-10a { transform: rotate(2deg); } .wobblies-enabled .drunk-tilt-10b { transform: rotate(-2deg); } .wobblies-enabled .drunk-scale-n4 { transform: scale(0.8); } .wobblies-enabled .drunk-scale-n3 { transform: scale(0.85); } .wobblies-enabled .drunk-scale-n2 { transform: scale(0.9); } .wobblies-enabled .drunk-scale-n1 { transform: scale(0.95); } .wobblies-enabled .drunk-scale-0 { transform: scale(1); } .wobblies-enabled .drunk-scale-1 { transform: scale(1.05); } .wobblies-enabled .drunk-scale-2 { transform: scale(1.1); } .wobblies-enabled .drunk-scale-3 { transform: scale(1.15); } .wobblies-enabled .drunk-scale-4 { transform: scale(1.2); } #wrapper-tilt.stop-wobblies { transition: transform 1s; transform: rotate(0deg); } #wrapper-scale.stop-wobblies { transition: all 1s; transform: scale(1); }