Skip to content

Instantly share code, notes, and snippets.

@alloy-d
Created June 1, 2014 14:48
Show Gist options
  • Save alloy-d/ecbc683f37eac38cbfbc to your computer and use it in GitHub Desktop.
Save alloy-d/ecbc683f37eac38cbfbc to your computer and use it in GitHub Desktop.
Truly some of my best work.
<!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