Skip to content

Instantly share code, notes, and snippets.

@razzius
Created January 25, 2017 01:16
Show Gist options
  • Save razzius/f2d5dea5bae0e763241b4703848d0db3 to your computer and use it in GitHub Desktop.
Save razzius/f2d5dea5bae0e763241b4703848d0db3 to your computer and use it in GitHub Desktop.
Exported from Popcode. Click to import: https://popcode.org/?gist=f2d5dea5bae0e763241b4703848d0db3
<!DOCTYPE html>
<html>
<head>
<title>DESTINY LUONG</title>
</head>
<body>
<h1>DESTINY LUONG:
<br>
COMPUTER PRODIGY</h1>
<ul>
<li>9<sup>th</sup> grade</li>
</ul>
<iframe src="https://en.wikipedia.org/wiki/Zootopia"></iframe>
<canvas></canvas>
</body>
</html>
var header = document.getElementsByTagName('h1')[0];
setInterval(function() {
header.innerText += '!';
}, 500);
var canvas = document.getElementsByTagName('canvas')[0];
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var ctx = canvas.getContext('2d');
ctx.strokeStyle='black';
canvas.onclick = function(e) {
ctx.beginPath();
ctx.lineWidth="6";
ctx.strokeStyle="black";
ctx.rect(e.clientX, e.clientY, 10, 10);
ctx.fill();
};
@keyframes background {
0% {background-color: salmon;}
50% {background-color: pink;}
100% {background-color: salmon;}
}
@keyframes header {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg);}
100% {transform: rotate(360deg);}
}
h1 {
margin-top: 40px;
animation: header 5s infinite linear;
max-width: 400px;
}
body {
animation: background 10s infinite;
}
iframe {
width: 100%;
height: 400px;
transform: scale(.7);
}
canvas {
left:0;
top:0;
position:absolute;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment