diff --git a/src/css/app.css b/src/css/app.css index 51ae719..6cc11be 100644 --- a/src/css/app.css +++ b/src/css/app.css @@ -1,14 +1,22 @@ body { - background: #ff8f00; + background: black; + /*background: #ff0000;*/ overflow: hidden; } #sky { - /*background: red;*/ - background: #ff8f00; + background: black; + /*background: #ff8f00;*/ + /*background: black;*/ } .cloud { position: absolute; background-size: 25px; +} + +a{ + position: absolute; + right: 0; + color: red; } \ No newline at end of file diff --git a/src/index.html b/src/index.html index 7d8000a..7ae76c0 100644 --- a/src/index.html +++ b/src/index.html @@ -7,7 +7,7 @@
- +https://github.com/shautvast/redsky
\ No newline at end of file diff --git a/src/js/index.js b/src/js/index.js index b502579..3d474ed 100644 --- a/src/js/index.js +++ b/src/js/index.js @@ -2,10 +2,10 @@ import '../css/app.css'; (function () { const num_clouds = 100, - max_cloud_size = 500, + max_cloud_size = 300, max_speed_x = 50, max_speed_y = 30, - num_clusters = 4; + num_clusters = 40; let cluster_x, cluster_y, cluster_size, cloud_counter; @@ -31,15 +31,24 @@ import '../css/app.css'; newCloud.style.width = `${size}px`; newCloud.style.height = `${size}px`; let diff = Math.random() * 255; - newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - diff}, 0, ${Math.random()}), rgba(20, 56, 200, 0.0)) no-repeat`; + newCloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, ${255 - diff}, 0, ${Math.random()}), rgba(0, 0, 0, 0.0)) no-repeat`; newCloud.setAttribute("size", `${size}`); sky.appendChild(newCloud); + if (i === 0) { + newCloud.style.top = "0"; + newCloud.style.left = "0"; + newCloud.style.width = `${width}px`; + newCloud.style.height = `${height}px`; + newCloud.setAttribute("size", `2000`); + newCloud.style.background = `radial-gradient(circle 1000px, rgba(255, 0, 0, 0.0), rgba(255, 0, 0, 1.0)) no-repeat`; + } } + } let arrange_clouds = function () { let num_clouds_in_cluster = (Math.floor(num_clouds / num_clusters)); - for (let i = 0; i < num_clouds; i++) { + for (let i = 1; i < num_clouds; i++) { if (i % num_clouds_in_cluster === 0) { cluster_x = Math.random() * width; cluster_y = Math.random() * height; @@ -56,12 +65,12 @@ import '../css/app.css'; } let step = function () { - let cloud = get_cloud(Math.floor(Math.random() * num_clouds)); + let cloud = get_cloud(1 + Math.floor(Math.random() * num_clouds)); let x = parseInt(cloud.style.left), y = parseInt(cloud.style.top); x -= (Math.random() * max_speed_x - max_speed_x); y -= (Math.random() * max_speed_y - max_speed_y); - if (x < -max_cloud_size && y < -max_cloud_size) { + if (x > width && y > height) { cloud_counter += 1; if (cloud_counter > (num_clouds / num_clusters)) { cluster_size = Math.random() * max_cloud_size; @@ -72,18 +81,18 @@ import '../css/app.css'; cloud.style.transition = "none"; - cloud.style.top = (cluster_x + Math.random() * cluster_size) + "px"; - cloud.style.left = (cluster_y + Math.random() * cluster_size) + "px"; + cloud.style.top = `${(cluster_x + Math.random() * cluster_size)}px`; + cloud.style.left = `${(cluster_y + Math.random() * cluster_size)}px`; let size = parseInt(cloud.getAttribute("size")) + Math.random(); - cloud.style.width = size + "px"; - cloud.style.height = size + "px"; - cloud.setAttribute("size", "" + size); - cloud.style.background = "radial-gradient(circle " + size / 2 + "px, rgba(255, 255, 255, " + Math.random() / 5 + "), rgba(20, 56, 200, 0.0)) no-repeat"; + cloud.style.width = `${size}px`; + cloud.style.height = `${size}px`; + cloud.setAttribute("size", `${size}`); + cloud.style.background = `radial-gradient(circle ${size / 2}px, rgba(255, 255, 255, ${Math.random() / 5} ), rgba(20, 56, 200, 0.0)) no-repeat`; } else { cloud.style.transition = "left 5s, top 5s"; - cloud.style.left = x + "px"; - cloud.style.top = y + "px"; + cloud.style.left = `${x}px`; + cloud.style.top = `${y}px`; } requestAnimationFrame(step); };