WHOA WHOA WHOA.\n\nIf you want screen shake in your Twine game, you can <html><a href="https://gist.github.com/4651698">follow the instructions here!</a></html>\n\n<<screenShake 500>>
function screenShake(time) {\n console.log(document);\n var el = document.getElementsByClassName('content');\n baz = el;\n console.log(baz[0]);\n el[0].className = el[0].className + ' shake'; \n if (time > 0) {\n setTimeout(function() {\n el[0].className = 'content';\n }, time);\n }\n};\n\n// the screenShake macro. Adapted from Emmanuel Turner's article on creating Twine macros. http://eturnerx.blogspot.com/2012/12/how-to-create-custom-macros-in-twine.html\ntry {\n version.extensions['screenShakeMacro'] = {\n major: 1,\n minor: 0,\n revision: 0\n };\n macros['screenShake'] = {\n handler: function (place, macroName, params, parser) {\nvar time = parseInt(params[0]);\nif (typeof time !== 'number') {\n time = 1000;\n}\nfade = function(el, options)\n{\n var current;\n var proxy = el.cloneNode(true);\n var direction = (options.fade == 'in') ? 1 : -1;\n \n el.parentNode.replaceChild(proxy, el);\n \n if (options.fade == 'in')\n {\n current = 0;\n proxy.style.visibility = 'visible';\n }\n else\n current = 1;\n\n setOpacity(proxy, current); \n var interval = window.setInterval(tick, 25);\n \n function tick()\n {\n current += 0.05 * direction;\n \n setOpacity(proxy, Math.easeInOut(current));\n \n if (((direction == 1) && (current >= 1))\n || ((direction == -1) && (current <= 0)))\n {\n console.log('swapping fader proxy out');\n el.style.visibility = (options.fade == 'in') ? 'visible' : 'hidden';\n proxy.parentNode.replaceChild(el, proxy);\n delete proxy;\n window.clearInterval(interval); \n \n if (options.onComplete)\n options.onComplete();\n \n if (time >= 0) {\n screenShake(time);\n time = -1;\n }\n \n }\n };\n \n function setOpacity (el, opacity)\n { \n var percent = Math.floor(opacity * 100);\n \n // IE\n el.style.zoom = 1;\n el.style.filter = 'alpha(opacity=' + percent + ')';\n \n // CSS 3\n el.style.opacity = opacity;\n };\n};\n },\n init: function () {\n },\n };\n} catch (e) {\n throwError(place, "screenShake Setup Error: " + e.message);\n}
SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! SHAKE!!!!!! \n\n<<screenShake 0>>\n\n[[click here for a shorter shake|shake2]]
<<display ActualStart>>
Screen Shake Demo
@keyframes shakeit {\n 0% { transform: translate(2px, 1px) rotate(0deg); }\n 10% { transform: translate(-1px, -2px) rotate(-1deg); }\n 20% { transform: translate(-3px, 0px) rotate(1deg); }\n 30% { transform: translate(0px, 2px) rotate(0deg); }\n 40% { transform: translate(1px, -1px) rotate(1deg); }\n 50% { transform: translate(-1px, 2px) rotate(-1deg); }\n 60% { transform: translate(-3px, 1px) rotate(0deg); }\n 70% { transform: translate(2px, 1px) rotate(-1deg); }\n 80% { transform: translate(-1px, -1px) rotate(1deg); }\n 90% { transform: translate(2px, 2px) rotate(0deg); }\n 100% { transform: translate(1px, -2px) rotate(-1deg); }\n}\n\n@-o-keyframes shakeit {\n 0% { -o-transform: translate(2px, 1px) rotate(0deg); }\n 10% { -o-transform: translate(-1px, -2px) rotate(-1deg); }\n 20% { -o-transform: translate(-3px, 0px) rotate(1deg); }\n 30% { -o-transform: translate(0px, 2px) rotate(0deg); }\n 40% { -o-transform: translate(1px, -1px) rotate(1deg); }\n 50% { -o-transform: translate(-1px, 2px) rotate(-1deg); }\n 60% { -o-transform: translate(-3px, 1px) rotate(0deg); }\n 70% { -o-transform: translate(2px, 1px) rotate(-1deg); }\n 80% { -o-transform: translate(-1px, -1px) rotate(1deg); }\n 90% { -o-transform: translate(2px, 2px) rotate(0deg); }\n 100% { -o-transform: translate(1px, -2px) rotate(-1deg); }\n}\n\n@-webkit-keyframes shakeit {\n 0% { -webkit-transform: translate(2px, 1px) rotate(0deg); }\n 10% { -webkit-transform: translate(-1px, -2px) rotate(-1deg); }\n 20% { -webkit-transform: translate(-3px, 0px) rotate(1deg); }\n 30% { -webkit-transform: translate(0px, 2px) rotate(0deg); }\n 40% { -webkit-transform: translate(1px, -1px) rotate(1deg); }\n 50% { -webkit-transform: translate(-1px, 2px) rotate(-1deg); }\n 60% { -webkit-transform: translate(-3px, 1px) rotate(0deg); }\n 70% { -webkit-transform: translate(2px, 1px) rotate(-1deg); }\n 80% { -webkit-transform: translate(-1px, -1px) rotate(1deg); }\n 90% { -webkit-transform: translate(2px, 2px) rotate(0deg); }\n 100% { -webkit-transform: translate(1px, -2px) rotate(-1deg); }\n}\n\n@-moz-keyframes shakeit {\n 0% { -moz-transform: translate(2px, 1px) rotate(0deg); }\n 10% { -moz-transform: translate(-1px, -2px) rotate(-1deg); }\n 20% { -moz-transform: translate(-3px, 0px) rotate(1deg); }\n 30% { -moz-transform: translate(0px, 2px) rotate(0deg); }\n 40% { -moz-transform: translate(1px, -1px) rotate(1deg); }\n 50% { -moz-transform: translate(-1px, 2px) rotate(-1deg); }\n 60% { -moz-transform: translate(-3px, 1px) rotate(0deg); }\n 70% { -moz-transform: translate(2px, 1px) rotate(-1deg); }\n 80% { -moz-transform: translate(-1px, -1px) rotate(1deg); }\n 90% { -moz-transform: translate(2px, 2px) rotate(0deg); }\n 100% { -moz-transform: translate(1px, -2px) rotate(-1deg); }\n}\n\n.shake {\n -webkit-animation-name: shakeit;\n -webkit-animation-duration: 0.8s;\n -webkit-transform-origin:50% 50%;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-timing-function: linear;\n -moz-animation-name: shakeit;\n -moz-animation-duration: 0.8s;\n -moz-transform-origin:50% 50%;\n -moz-animation-iteration-count: infinite;\n -moz-animation-timing-function: linear;\n -o-animation-name: shakeit;\n -o-animation-duration: 0.8s;\n -o-transform-origin:50% 50%;\n -o-animation-iteration-count: infinite;\n -o-animation-timing-function: linear;\n animation-name: shakeit;\n animation-duration: 0.8s;\n transform-origin:50% 50%;\n animation-iteration-count: infinite;\n animation-timing-function: linear;\n}\n.shake{\n display:inline-block\n}