From 5e3a1c4ff5bbcf42eb90d7063bf842efb23a419b Mon Sep 17 00:00:00 2001 From: MonkeyGG2 Date: Sun, 6 Aug 2023 18:24:35 +0530 Subject: [PATCH] slight adjustments to loading screen and made it fade out on page load --- css/loading.css | 12 +++++++-- index.html | 72 +++++++++++++++++++++++++++++++++++++++++++++---- js/loading.js | 5 ++-- 3 files changed, 79 insertions(+), 10 deletions(-) diff --git a/css/loading.css b/css/loading.css index 306f485f..b7c6cb69 100644 --- a/css/loading.css +++ b/css/loading.css @@ -76,6 +76,10 @@ body { animation-name: worm2; } +.stopped { + animation-play-state: paused; +} + @keyframes worm1 { from { stroke-dashoffset: 0; @@ -136,7 +140,6 @@ section { position: absolute; top: 0; left: 0; - z-index: 5; overflow: hidden; } @@ -151,7 +154,12 @@ section { width: 100%; height: 100%; overflow: hidden; - z-index: 9; + z-index: 1; + + /* this makes browser use GPU acceleration for blur */ + will-change: contents; + + filter: blur(2.5px); } .hexagonGrid .row { diff --git a/index.html b/index.html index d9b88593..8df4e2fb 100644 --- a/index.html +++ b/index.html @@ -7,17 +7,43 @@ - + + + + +
@@ -55,10 +81,46 @@
+ +
+
+ + +
- + + + \ No newline at end of file diff --git a/js/loading.js b/js/loading.js index c1db61f6..000d7e4d 100644 --- a/js/loading.js +++ b/js/loading.js @@ -2,7 +2,7 @@ function changeLoadingTip() { const tips = ["Press CTRL+C to cloak your current tab","Press CTRL+M to mask your current tab", "Press CTRL+B to go back to the home page", "Join our discord server!", "Make sure to enable popups for automatic cloak", "Why are you here?"] const element = document.getElementsByClassName("loading-tip")[0]; - element.textContent = tips[Math.floor(Math.random() * tips.length)]; + element.textContent = "Loading... \n" + tips[Math.floor(Math.random() * tips.length)]; } let changeTip = setInterval(() => { @@ -32,10 +32,9 @@ window.addEventListener('mousemove', function(event) { mouse.x = event.x; mouse.y = event.y; mouse.radius = 170; - console.log(mouse.radius); }); -document.onmousemove = (function(event) { +document.onmousemove = (function(_) { var onmousestop = function() { mouse.radius = 0; }, thread;