No images in this repository’s iceberg at this time
Download raw (6.5 KB)
<?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:epub="http://www.idpf.org/2007/ops"> <head> <meta charset="utf-8"></meta> <title>Goldenframe Propaganda</title> <link rel="stylesheet" type="text/css" href="styles/style.css" class="day" title="day"/> <style> #seq img { background-image:url('sequences/4sequence.jpg');} </style> <script type="text/javascript"> //<![CDATA[[ var winW, winH; var lastMouse, lastOrientation; var width, posX; function setSize() { width = id('metaimg').offsetWidth posX = -5 * width; } window.onload = init; function setSize() { width = id('metaimg').offsetWidth frames = 11; // Define the amount of frames in the strip angleRange = [-25, 25] // We define the angles at wich we want to show the most left // and the most right image posX = -5 * width; // Start position of the strip frameStep = (angleRange[1] - angleRange[0]) / frames // We want to know the 'angle' the device has to be tilted // to move to the next frame in the strip. We do this by // dividing the total range by the amount of frames } function init() { console.log ('init'); setSize(); lastOrientation = {}; window.addEventListener('resize', setSize, false); document.body.addEventListener('mousemove', onMouseMove, false); window.addEventListener('deviceorientation', deviceOrientationTest, false); lastMouse = null; } // Does the gyroscope or accelerometer actually work? function deviceOrientationTest(event) { window.removeEventListener('deviceorientation', deviceOrientationTest); if (event.beta != null && event.gamma != null) { window.addEventListener('deviceorientation', onDeviceOrientationChange, false); // This function call was commented out but is really // important, since it regularly checks the angle of // the decive. In this case 60 times per second animationId = setInterval(onRenderUpdate, (1000 / 60)); } } function onDeviceOrientationChange(event) { // Here we simply record the most recent position of // the device. This event is fired a LOT on the iPad // but also irregulary? lastOrientation.gamma = event.gamma; lastOrientation.beta = event.beta; } function onRenderUpdate(event) { var angle; // We are actually only interested in the angle of the device switch (window.orientation) { case 0: angle = lastOrientation.gamma; break; case 180: angle = lastOrientation.gamma * -1; break; case 90: angle = lastOrientation.beta; break; case -90: angle = lastOrientation.beta * -1; break; default: angle = lastOrientation.gamma; } if (angle <= angleRange[0]) { currentFrame = 0; // If the angle of the device is smaller than the minimum angle // we've defined on line 23 we activate the first frame } else if (angle >= angleRange[1]) { // If the angle of the device is bigger than the maximum angle // we've defined on line 23 we activate the last frame currentFrame = frames - 1 } else { // The angle of the device is within the ranges so we have to // calculate the active / current frame. currentFrame = Math.floor ((angle - angleRange[0]) / frameStep) // We calculate the active frame by dividing the angle by the unit // we've found in line 28. Actually we first subtract the left limit // of our range from the angle. Since we want to know the offset of // the angle with the left limit of our range. } id('metaimg').style.backgroundPosition = (-1 * currentFrame * width) + 'px 0px'; // We move the background image into place. } // Actually it moves the strip either one step left or right, based on the movement of // the mouse. So this implementation is quite dependent behaviour of the browser with // the mousemove event. function onMouseMove(event) { var xDelta, yDelta; if (navigator.webkitPointer && navigator.webkitPointer.isLocked) { xDelta = event.webkitMovementX; yDelta = event.webkitMovementY; } else { if (lastMouse == null) lastMouse = {x:event.clientX, y:event.clientY}; xDelta = event.clientX - lastMouse.x; yDelta = event.clientY - lastMouse.y; } lastMouse.x = event.clientX; lastMouse.y = event.clientY; if(xDelta > 0){ moveSequence(true); } else if(xDelta < 0){ moveSequence(false); } } function moveSequence(moveRight){ if(moveRight && posX > width*-10){ posX -= width; } else if(!moveRight && posX < 0){ posX += width; } id('metaimg').style.backgroundPosition = posX + 'px 0px'; } function id(name) { return document.getElementById(name); }; window.onload = init; //]]> </script> </head> <body> <div id="seq"><img id="metaimg" src="placeholder.png" /></div> </body> </html>