Prettier image loading

2024-08-26 19:36:05 -04:00
parent feacf82cf9
commit 9d0995d4e9
3 changed files with 11 additions and 2 deletions
@@ -10,6 +10,7 @@
 </head>

 <body>
+    <script type="module" src="/src/main.ts"></script>
    <div id="app">
        <div class="text">
            <h1>hi! i'm august. or kline. </h1>
@@ -29,7 +30,6 @@
        <div id="background">
        </div>
    </div>
-    <script type="module" src="/src/main.ts"></script>
 </body>

 </html>
@@ -170,6 +170,10 @@ const onMove = (ev: MouseEvent) => {
  root.style.setProperty("--rotate-y", rotateY);
 };

+window.addEventListener("load", () => {
+  background.setAttribute("loaded", "");
+  console.log(background);
+});
 document.addEventListener("mousemove", onMove);

 setImages();
@@ -69,7 +69,8 @@ a:hover {

 img {
    transform: translate(-50%, -50%) translateZ(var(--translate-z));
-    transition: transform 1s;
+    transition: opacity 0.3s;
+    opacity: 0;
    position: absolute;
    inline-size: 10%;
    z-index: -1;
@@ -90,6 +91,10 @@ img {
    block-size: 100%;
    z-index: -1;
    position: absolute;
+
+    &[loaded] img {
+        opacity: 1 !important;
+    }
 }

@media (prefers-reduced-motion: reduce) {