better slow loading
Marco Andronaco andronacomarco@gmail.com
Tue, 20 Sep 2022 15:49:08 +0200
6 files changed,
15 insertions(+),
16 deletions(-)
M
index.html
→
index.html
@@ -9,7 +9,7 @@ <link rel="stylesheet" href="res/css/style.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2280%22>ðŸ¥</text></svg>"> </head> -<body style='background-image: url("res/img/background.jpg"); height: 100%;'> +<body style='background-image: url("res/img/background.jpg");'> <div id="overlay"> <div style="margin:auto;"> Click here to enter.
M
pages/gf.html
→
pages/gf.html
@@ -13,9 +13,7 @@ <span style="left: 95px; top:25px; font-size: xx-large; text-shadow: 2px 2px violet;"class="el center">My love Giulia</span>
<span style="left: 125px; top: 100px;" class="el center tilt-right deeppink white-shadow">This is my beautiful gf <3</span> <span style="left: 225px; top: 250px;" class="el center tilt-left deeppink white-shadow">Look at her --></span> <span style="left: 180px; top: 400px;" class="el center tilt-left deeppink white-shadow">She's so perfect!!</span> - <div style="position: absolute; left: 333px; top: 11px;"> - <img style="width:60px;" class="el up-down" src="../res/gif/gf/heart_spin.gif" /> - </div> + <div style="position: absolute; left: 333px; top: 11px;"><img style="width:60px;" class="el up-down" src="../res/gif/gf/heart_spin.gif" /></div> <img style="left: 355px; top: 40px; z-index: -1;" class="el tilt-left" src="../res/img/giulia.gif" /> <img style="left: 580px; top: 25px; width:220px; z-index:2;" class="el flip-x" src="../res/gif/gf/dove.gif" /> <img style="left: 473px; top: 233px; width:60px;" class="el flip-x" src="../res/gif/gf/sparkle.gif" />@@ -31,27 +29,27 @@ She's among the strongest and smartest people I know, definitely the
most beautiful, and I'm so glad I get to hug her and be hers forever!! </span> <marquee style="left: 0; top: 712px;" class="el" width="100%"> - <span class="center mediumvioletred white-shadow">this is a pic of us together <3</span> + <span class="center mediumvioletred white-shadow">this is a pic of us together <3</span> </marquee> - <img style="left: 190px; top: 680px; z-index: -1;" class="el tilt-right" src="../res/img/rockers.gif" /> <img style="left: 553px; top: 668px; width: 150px; z-index: -2;" class="el tilt-left" src="../res/gif/gf/3dheart.gif" /> <img style="left: 360px; top: 830px; width: 80px;" class="el" src="../res/gif/gf/heart.gif" /> <img style="left: 465px; top: 740px; width: 100px;" class="el flip-y" src="../res/gif/gf/whiteflower.gif" /> <img style="left: 345px; top: 980px; width: 100px;" class="el" src="../res/gif/gf/spinningheartmedium.gif" /> + <img style="left: 190px; top: 680px; z-index: -1;" class="el tilt-right" src="../res/img/rockers.gif" /> <span style="left: 50px; top: 1130px;" class="el half-width"> She likes cats, hamsters and anything that's pink and cute, which is weird because I am neither of those things. </span> - <img style="left: 50px; top: 1220px;" class="el" src="../res/gif/gf/hamtaro.gif" /> + <img style="left: 260px; top: 1455px;" class="el" src="../res/gif/gf/heartbounce.gif" /> <img style="left: 200px; top: 1435px;" class="el" src="../res/gif/gf/mew.gif" /> - <img style="left: 260px; top: 1455px;" class="el" src="../res/gif/gf/heartbounce.gif" /> <img style="left: 268px; top: 1447px; width: 70px;" class="el flip-x" src="../res/gif/gf/pikachu.gif" /> + <img style="left: 50px; top: 1220px;" class="el" src="../res/gif/gf/hamtaro.gif" /> <span style="left: 297px; top: 1510px; line-height:2px; text-shadow: none" class="el center">^<br />|</span> + <span style="left: 290px; top: 1515px;" class="el">me</span> <span style="left: 236px; top: 1510px; line-height:2px; text-shadow: none" class="el center">^<br />|</span> <span style="left: 225px; top: 1515px;" class="el">her</span> - <span style="left: 290px; top: 1515px;" class="el">me</span> <span style="left: 450px; top: 1130px" class="el half-width">One time she ate too much soup and then she felt sick but she still wanted more soup</span> <img style="left: 300px; top: 1130px;" class="el" src="../res/gif/gf/soup.gif" />
M
pages/indies.html
→
pages/indies.html
@@ -15,6 +15,7 @@ <h2>Fran Bow</h2>
<h2>Psychonauts</h2> <h2>Undertale</h2> <h2>Hylics</h2> + <h2>Space Funeral</h2> <script src="../res/js/slow_load.js"></script> <script src="../res/js/iframe.js"></script>
M
res/css/style.css
→
res/css/style.css
@@ -45,7 +45,6 @@ transform: rotate(3deg);
} #main-container { - /* width: calc(100% / 2); */ height: 100%; width: 800px; margin: auto;@@ -56,7 +55,7 @@ text-align: center;
background-image: url("../img/orange-banner.jpg"); background-size: cover; color: white; - padding:15px; + padding: 15px; margin-top: -18px; }
M
res/js/main.js
→
res/js/main.js
@@ -1,6 +1,6 @@
const iframe = document.getElementById("mainframe"); -const loadSpeed = 2; +const loadSpeed = 3; let first = false; let play = false;
M
res/js/slow_load.js
→
res/js/slow_load.js
@@ -26,8 +26,8 @@ for (i in all) {
const node = all[i]; if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){ total++; - node.setAttribute("data-display", node.style.display); - node.style.display = "none"; + node.setAttribute("data-opacity", node.style.opacity); + node.style.opacity = "0"; } } }@@ -38,8 +38,9 @@ let counter = 0;
let i = 0; function onNodeLoaded(node){ + node.style.transition = "opacity .3s ease-out"; + node.style.opacity = node.getAttribute("data-opacity"); - node.style.display = node.getAttribute("data-display"); counter++; const ratio = counter / total * 100;@@ -52,7 +53,7 @@
for (element in all) { const node = all[element]; if((node.childElementCount == 0) && (not_allowed.indexOf(node.tagName) === -1) && node.style){ - i += getRandomInt(250 / speed, 500 / speed); + i += getRandomInt(100 / speed, 550 / speed); setTimeout(() => { onNodeLoaded(node);}, i); } }