aheh/monkeygg2.github.io
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

slight adjustments to loading screen and made it fade out on page load

Browse Source
This commit is contained in:
MonkeyGG2
2023-08-06 18:24:35 +05:30
parent 099894b409
commit 5e3a1c4ff5
3 changed files with 79 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/loading.css
+10 -2
View File
@@ -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 {
index.html
+67 -5
View File
@@ -7,17 +7,43 @@
<meta name="og:image" content="favicon.png">
<link href="css/loading.css" rel="preload" as="style" onload="this.rel = 'stylesheet'">
<noscript>
<link href="css/loading.css" rel="stylesheet">
</noscript>
<link href="js/loading.js" rel="preload" as="script">
<link href="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js" rel="preload" as="script">
</head>
<body>
<noscript>
<p id="noscript-text">
This site requires you to be able to run JavaScript.
</p>
<style>
body *:not(noscript) {
display: none;
}
#noscript-text {
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
height: 100vh;
width: 100vw;
background-color: black;
color: white;
z-index: 999;
}
</style>
</noscript>
<div class="loading">
<div>
<div class="loading-tip">
<script>
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?"]
document.getElementsByClassName("loading-tip")[0].textContent = tips[Math.floor(Math.random() * tips.length)];
document.getElementsByClassName("loading-tip")[0].textContent = "Loading...\n" + tips[Math.floor(Math.random() * tips.length)];
</script>
</div>
<div class="loading-infinity">
@@ -55,10 +81,46 @@
</div>
</div>
<section>
</section>
<section id="everything-else">
<canvas class="particles"></canvas>
<div class="hexagonGrid"></div>
<!-- TEMPORARY!!! increases loading times to demonstrate loading screen -->
<img src="https://random.imagecdn.app/1500/1500">
</section>
<script src="js/loading.js" async defer></script>
<!-- loading.js file and jQuery are preloaded -->
<script defer>
const loading = document.createElement("script");
loading.src = "js/loading.js";
document.body.appendChild(loading);
const jquery = document.createElement("script");
jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js";
document.body.appendChild(jquery);
jquery.onload = () => {
$(window).on("load", () => {
$(".track").attr("stroke", "url(#grad2)");
$(".worm1").hide();
$(".worm2").hide();
$(".loading").fadeOut({
duration: 300,
/*complete: () => {
setTimeout(500, () => {
$("#everything-else").fadeIn({
duration: 500,
easing: "easeInOutSine"
});
});
}*/
});
});
}
</script>
</body>
</html>
js/loading.js
+2 -3
View File
@@ -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;