Add parallax

src/page/background/background.html.ts

@@ -0,0 +1,23 @@
+import { html } from "../../model/misc";
+import "./background.scss";
+import { fixedSeedRandom } from "../../framework/helper";
+
+export const generate = (
+  count: number,
+  probability: number,
+  width: number,
+  color: string
+): html => `
+    <section class="background">
+        ${new Array(count)
+          .fill(0, 0, count)
+          .map(_ =>
+            fixedSeedRandom() < probability
+              ? `<div style="width: ${width}px; height: ${width *
+                  (fixedSeedRandom() + 0.1) *
+                  10}px; background-color: ${color}"></div>`
+              : `<div class="gap"></div>`
+          )
+          .join("")}
+    </section>
+`;

src/page/background/background.scss

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

src/page/background/background.ts

@@ -0,0 +1,24 @@
+import { PageElement } from "../../framework/page-element";
+import { createElement } from "../../framework/element-factory";
+import { generate } from "./background.html";
+
+export class PageBackground extends PageElement {
+  public constructor(
+    private speed: number,
+    count: number,
+    width: number,
+    probability: number,
+    color: string
+  ) {
+    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);
+  }
+}