Last active
December 28, 2015 08:49
-
-
Save mobeets/7474029 to your computer and use it in GitHub Desktop.
Alen Galey's Animated Variants
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?xml version="1.0" encoding="UTF-8"?> | |
<html xmlns="http://www.w3.org/1999/xhtml"> | |
<head> | |
<title>Animated Variants v.1.1</title> | |
<script src="styles.css"></script> | |
<script src="readings.js"></script> | |
</head> | |
<body onload="getReadings()"> | |
<sp> | |
Oh that this too too | |
<app id="app0"> | |
<lem></lem> | |
<rdg>sallied inside me thinking</rdg> | |
<rdg>solid and happy thinking</rdg> | |
</app> | |
flesh would melt,<br> | |
Thaw, and resolve itself into a dew.<br> | |
Thou hast it all -- King, Cawdor, Glamis, all<br> | |
As the | |
<app id="app1"> | |
<lem>weird</lem> | |
<rdg>wayward yes<br> I am happy you see</rdg> | |
<rdg>weyard</rdg> | |
</app> | |
women promised, and I fear<br> | |
Thou playd'st most foully for it. | |
</sp> | |
<br><br> | |
Version of <a href="http://individual.utoronto.ca/alangaley/visualizingvariation/"><i>Alen Galey's Animated Variants</i></a>. Ignores HTML tags. | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* LICENSE INFORMATION | |
Design and programming by Alan Galey, 4 April 2012 (alan.galey.vv@gmail.com) | |
Unless otherwise noted, all code licensed under Creative Commons Attribution-ShareAlike License v3.0 | |
http://creativecommons.org/licenses/by-sa/3.0/ | |
When reusing or adapting this code, please credit me by name and include the project link: http://individual.utoronto.ca/alangaley/visualizingvariation/ | |
*/ | |
// * * * USER PARAMETERS (values in milliseconds) | |
var letterChangeRate = 100; | |
var variantChangeInterval = 3000; | |
// * * * | |
var intervals = new Array(); | |
var readings = new Array(); | |
function readingArray() { | |
this.variants = new Array(); | |
this.activeVariantIndex = 1; | |
} | |
function getReadings() { | |
//NOTE: to test individual app elements in a document, comment out the for loop just below, and manually enter the id's of the app elements you want | |
//to test into the readings array declaration above, ex: var readings = new Array("app.0","app.1"); | |
for (t=0; t < document.getElementsByTagName("app").length; t++) { | |
readings.push(document.getElementsByTagName("app").item(t).id); | |
} | |
for (t=0; t < readings.length; t++) { | |
readings[readings[t]] = new readingArray(); | |
theApp = document.getElementById(readings[t]); | |
for (u=0; u < theApp.children.length; u++) { | |
txt = theApp.children.item(u).textContent; | |
readings[readings[t]].variants.push(txt); //assumes only text within rdg elements | |
} | |
intervals[readings[t]] = window.setInterval("cycleVariants('" + readings[t] + "')",letterChangeRate); | |
} | |
} | |
function cycleVariants(targetId, restart) { | |
targetText = document.getElementById(targetId).children.item(0).innerHTML; | |
variantText = readings[targetId].variants[readings[targetId].activeVariantIndex]; | |
var c = 0; | |
var t = targetText.charAt(c); | |
var v = variantText.charAt(c); | |
while (t == v && c< targetText.length && c < variantText.length) { | |
c++; | |
var t = targetText.charAt(c); | |
var v = variantText.charAt(c); | |
} | |
if (t != v) { | |
document.getElementById(targetId).children.item(0).innerHTML = targetText.slice(0,c) + v + targetText.slice(c+1,targetText.length); | |
} | |
if (targetText == variantText) { | |
readings[targetId].activeVariantIndex++; | |
if (readings[targetId].activeVariantIndex >= readings[targetId].variants.length) { | |
readings[targetId].activeVariantIndex = 0; | |
} | |
window.clearInterval(intervals[targetId]); | |
window.setTimeout("intervals['" + targetId + "'] = window.setInterval('cycleVariants(\"" + targetId + "\")'," + letterChangeRate + ")",variantChangeInterval); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sp { | |
display: block; | |
margin: 3em; | |
} | |
rdg { | |
display: none; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment