last commit
This commit is contained in:
commit
c0c0ed0066
5 changed files with 47 additions and 0 deletions
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
||||||
|
*.iml
|
||||||
|
.idea/
|
||||||
3
README.md
Normal file
3
README.md
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
__Gradients are pretty magic!__
|
||||||
|
|
||||||
|
Just a simple app that lets you stare at the sky
|
||||||
12
index.html
Normal file
12
index.html
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>sky</title>
|
||||||
|
<link rel="stylesheet" href="sky.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas></canvas>
|
||||||
|
</body>
|
||||||
|
<script type="application/ecmascript" src="sky.js"></script>
|
||||||
|
</html>
|
||||||
4
sky.css
Normal file
4
sky.css
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
span {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
26
sky.js
Normal file
26
sky.js
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
(function () {
|
||||||
|
let canvas = document.getElementsByTagName("canvas")[0];
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
canvas.onclick = () => {
|
||||||
|
canvas.requestFullscreen().then();
|
||||||
|
};
|
||||||
|
|
||||||
|
window.onresize = () => {
|
||||||
|
canvas.width = window.innerWidth;
|
||||||
|
canvas.height = window.innerHeight;
|
||||||
|
};
|
||||||
|
|
||||||
|
let i = 0, di = 1,
|
||||||
|
step = function () {
|
||||||
|
if ((i < 1000 && di > 0) || (i > 0 && di < 0)) {
|
||||||
|
i += di;
|
||||||
|
canvas.style.background = 'linear-gradient(' + i + 'deg, white , rgb(20,56,200))';
|
||||||
|
} else {
|
||||||
|
di = -di;
|
||||||
|
}
|
||||||
|
setTimeout(step, 150);
|
||||||
|
};
|
||||||
|
|
||||||
|
step();
|
||||||
|
})()
|
||||||
Loading…
Add table
Reference in a new issue