Created
June 1, 2014 14:48
-
-
Save alloy-d/ecbc683f37eac38cbfbc to your computer and use it in GitHub Desktop.
Truly some of my best work.
This file contains hidden or 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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>DAMMIT BILL</title> | |
<style> | |
html, body { height: 100%; } | |
body { | |
font-family: "Helvetica Neue", sans-serif; | |
font-size: 110px; | |
text-transform: uppercase; | |
} | |
marquee { | |
background-color: transparent; | |
height: 100%; | |
position: absolute; | |
width: 100%; | |
z-index: 0; | |
} | |
</style> | |
</head> | |
<body> | |
<!-- <marquee scrollamount=18 scrolldelay=60>test</marquee> --> | |
<script> | |
(function () { | |
"use strict"; | |
function randomColor() { | |
function randomSingleValue() { | |
return 128 + Math.floor(Math.random() * 128); | |
} | |
return "rgb(" + [randomSingleValue(), randomSingleValue(), randomSingleValue()].join(",") + ")"; | |
} | |
function makeMarquee(text, direction, behavior) { | |
var el = document.createElement("marquee"); | |
el.innerText = text; | |
el.setAttribute("scrollamount", 6 + Math.floor(Math.random() * 20)); | |
el.setAttribute("scrolldelay", 60); | |
el.setAttribute("direction", direction); | |
el.setAttribute("behavior", behavior); | |
el.style.color = randomColor(); | |
return el; | |
} | |
function randomMarqueeDirection() { | |
var directions = [ | |
"left", | |
"right", | |
"up", | |
"down" | |
]; | |
return directions[Math.floor(Math.random() * directions.length)]; | |
} | |
function randomMarqueeBehavior() { | |
var behaviors = [ | |
"scroll", | |
"bounce" | |
]; | |
return behaviors[Math.floor(Math.random() * behaviors.length)]; | |
} | |
window.makeMarquee = makeMarquee; | |
window.makeRandomMarquee = function makeRandomMarquee(text) { | |
return makeMarquee(text, randomMarqueeDirection(), randomMarqueeBehavior()); | |
}; | |
["up", "down", "left", "right"].forEach(function (direction) { | |
document.body.appendChild(makeRandomMarquee("happy birthday bill")); | |
}); | |
}()) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment