a work of digital history that visualizes the story in the capta
Components:
- the question, problem, or provocation
- sources (primary, secondary)
- analytical activity
- audience
- product
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Foo</title> | |
<meta charset='utf-8' /> | |
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' /> | |
<style type='text/css'> | |
body { | |
font-family: 'Helvetica'; | |
letter-spacing:-5px; | |
background:#000; | |
background-size:100%; | |
color:#fff; | |
margin:0; | |
padding:0; | |
font-weight:bold; | |
} | |
h1, h2, h3, p { | |
margin:0; | |
} | |
em, a { | |
font-style:normal; | |
color:#8dbd0c; | |
} | |
a { | |
background: #34d0e7; | |
color:#000; | |
text-decoration:none; | |
} | |
img { | |
width:100%; | |
} | |
div { | |
cursor:pointer; | |
cursor:hand; | |
position:absolute; | |
top:0; | |
left:0; | |
} | |
</style> | |
<script type='text/javascript'> | |
window.onload = function() { | |
var s = document.getElementsByTagName('div'), cur = 0, ti; | |
if (!s) return; | |
function go(n) { | |
cur = n; | |
var i = 1e3, e = s[n], t; | |
document.body.className = e.dataset.bodyclass || ''; | |
for (var k = 0; k < s.length; k++) s[k].style.display = 'none'; | |
e.style.display = 'inline'; | |
e.style.fontSize = i + 'px'; | |
if (e.firstChild && e.firstChild.nodeName === 'IMG') { | |
document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')'; | |
e.firstChild.style.display = 'none'; | |
if ('classList' in e) e.classList.add('imageText'); | |
} else { | |
document.body.style.backgroundImage = ''; | |
document.body.style.backgroundColor = e.style.backgroundColor; | |
} | |
if (ti !== undefined) window.clearInterval(ti); | |
t = parseInt(e.dataset.timeToNext || 0, 10); | |
if (t > 0) ti = window.setTimeout(fwd, (t * 1000)); | |
while ( | |
e.offsetWidth > window.innerWidth || | |
e.offsetHeight > window.innerHeight) { | |
e.style.fontSize = (i -= 2) + 'px'; | |
if (i < 0) break; | |
} | |
e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px'; | |
if (window.location.hash !== n) window.location.hash = n; | |
document.title = e.textContent || e.innerText; | |
} | |
document.onclick = function() { go(++cur % (s.length)); }; | |
function fwd() { go(Math.min(s.length - 1, ++cur)); } | |
function rev() { go(Math.max(0, --cur)); } | |
document.onkeydown = function(e) { | |
if (e.which === 39 || e.which === 34 || e.which === 40) fwd(); | |
if (e.which === 37 || e.which === 33 || e.which === 38) rev(); | |
}; | |
document.ontouchstart = function(e) { | |
var x0 = e.changedTouches[0].pageX; | |
document.ontouchend = function(e) { | |
var x1 = e.changedTouches[0].pageX; | |
if (x1 - x0 < 0) fwd(); | |
if (x1 - x0 > 0) rev(); | |
}; | |
}; | |
function parse_hash() { | |
return Math.max(Math.min( | |
s.length - 1, | |
parseInt(window.location.hash.substring(1), 10)), 0); | |
} | |
if (window.location.hash) cur = parse_hash() || cur; | |
window.onhashchange = function() { | |
var c = parse_hash(); | |
if (c !== cur) go(c); | |
}; | |
go(cur); | |
}; | |
</script></head><body> | |
<div><p><img src="http://uthmag.com/wp-content/uploads/2012/11/End-of-the-World-1024x640.jpg" alt="img"></p> | |
<h2 id="the-final-project">The Final Project</h2> | |
</div> | |
<div><p><img src="https://static.pexels.com/photos/6444/pencil-typography-black-design.jpg" alt="design"></p> | |
</div> | |
<div><p><img src="https://farm3.staticflickr.com/2661/3877351951_560ef8f01c_o_d.jpg" alt="create"></p> | |
</div> | |
<div><p><img src="https://static.pexels.com/photos/142/vintage-old-book-document.jpg" alt="document"> | |
& document</p> | |
</div> | |
<div><p>a work of digital history that visualizes the story in the capta</p> | |
</div> | |
<div><p>Ok?</p> | |
</div> | |
<div><p>Components:</p> | |
<ul> | |
<li>the question, problem, or provocation</li> | |
<li>sources (primary, secondary)</li> | |
<li>analytical activity</li> | |
<li>audience</li> | |
<li>product</li> | |
</ul> | |
</div> | |
<div><p><img src="https://static.pexels.com/photos/911/time-watch-hands-of-a-clock-clock-pointers-large.jpg" alt="budget"> | |
Budget your time</p> | |
</div> | |
<div><p><img src="https://static.pexels.com/photos/966/black-and-white-restaurant-eating-sitting.jpg" alt="talk"> | |
And talk to each other.</p> | |
</div> | |
<div><p><a href="finalprojectimagecredits.md">Image Credits</a></p> | |
</div> |
a work of digital history that visualizes the story in the capta
Components: