Created
August 25, 2017 20:48
-
-
Save SpineyPete/ea3cdc02dd06f7154c4954852e030194 to your computer and use it in GitHub Desktop.
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
// Makes text funky. | |
"use strict"; | |
function funkyType(selector, args) { | |
function limitDecimals(n, decimals) { | |
decimals = Math.pow(10, decimals); | |
return Math.trunc(n * decimals) / decimals; | |
} | |
function minMaxRand(min, max) { | |
return Math.random() * (max - min) + min; | |
} | |
// Get all the elements to process. | |
var funkyTypes = document.getElementsByClassName(selector); | |
// Loop through elements. | |
for (var i = 0; i < funkyTypes.length; i++) { | |
var elt = funkyTypes[i]; | |
var str = elt.innerHTML; | |
var newhtml = []; | |
// Loop through textcontent one char at a time. | |
for (var j = 0; j < str.length; j++) { | |
var char = str[j]; | |
// Skip whitespace. | |
if (char === "\t" || char === " " || char === "\n") { | |
continue; | |
} | |
// TODO: this is kinda messy... ah well, suffices for now. | |
var span = [ | |
"<span class=\"", | |
selector, | |
"_Char\" style=\"display: inline-block; ", | |
// Randomize char size. | |
"transform: scale(", | |
limitDecimals(minMaxRand(args.size.min, args.size.max), 4), | |
// Randomize char rotation. | |
") rotate(", | |
Math.random() > 0.5 ? "-" : "", // Randomize tilting direction | |
limitDecimals(minMaxRand(args.rot.min, args.rot.max), 4), | |
"turn", | |
// Randomize x and y offsets. | |
") translate(", | |
limitDecimals(Math.random() * args.x, 1), | |
"px,", | |
limitDecimals(Math.random() * args.y, 1), | |
"px)", | |
";\">", | |
// Put char. | |
char, | |
"</span>" | |
].join(""); | |
// Push span onto new innerhtml. | |
newhtml.push(span); | |
} | |
// Turn array into string and update DOM. | |
elt.innerHTML = newhtml.join("\n"); | |
} | |
} | |
var args = { | |
size: { | |
min: 0.75, | |
max: 1.5 | |
}, | |
rot: { | |
min: 0, | |
max: 0.01 | |
}, | |
x: 2, | |
y: 5 | |
}; | |
funkyType("jsFunkytype", args); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment