WIP

src/page/background/background.html.ts

@@ -6,7 +6,8 @@ export const generate = (
   count: number,
   probability: number,
   width: number,
-  color: string
+  color: string,
+  translateZ: number
 ): html => `
     <section class="background">
         ${new Array(count)
@@ -15,7 +16,8 @@ export const generate = (
             fixedSeedRandom() < probability
               ? `<div style="width: ${width}px; height: ${width *
                   (fixedSeedRandom() + 0.1) *
-                  10}px; background-color: ${color}"></div>`
+                  10}px; background-color: ${color}; transform: translateZ(${translateZ}px) rotate(-20deg);"
+                ></div>`
               : `<div class="gap"></div>`
           )
           .join("")}

src/page/background/background.scss

@@ -2,23 +2,20 @@
 @import "../../style/mixins";
 
 .background {
-  position: fixed;
+  position: absolute;
   left: 0;
   top: 0;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
   margin-top: -20vh;
-  width: 100%;
-  height: 100%;
+  width: 400%;
   z-index: -1;
 
   div {
     border-radius: 10000px;
     margin: 10vh 10vw;
 
-    transform: rotate(-20deg);
-
     &.gap {
       visibility: hidden;
     }

src/page/background/background.ts

@@ -8,17 +8,12 @@ export class PageBackground extends PageElement {
     count: number,
     width: number,
     probability: number,
-    color: string
+    color: string,
+    translateZ: number
   ) {
     super();
-    this.setElement(createElement(generate(count, probability, width, color)));
-  }
-
-  public onAfterLoad(parent: HTMLElement) {
-    window.addEventListener("scroll", () => {
-      this.getElement().style.transform = `translateY(-${window.scrollY *
-        this.speed}px)`;
-    });
-    super.onAfterLoad(parent);
+    this.setElement(
+      createElement(generate(count, probability, width, color, translateZ))
+    );
   }
 }