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/1sequence.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>