Refactor

src/page/background/background.html.ts

@@ -5,5 +5,4 @@ export const generate = (): html => `
     <section id="background-container">
         <section id="background"></section>
     </section>
-    <div id="edge-hack"></div>
 `;

src/page/background/background.scss

@@ -2,10 +2,10 @@
 @import "../../style/mixins";
 
 #background-container {
-  position: absolute;
+  position: fixed;
   left: 0;
   top: 0;
-  height: 100%;
+  height: 100vh;
   width: 100%;
 
   z-index: -1;
@@ -42,7 +42,3 @@
     }
   }
 }
-
-#edge-hack {
-  position: fixed;
-}

src/page/background/background.ts

@@ -1,31 +1,19 @@
-import { PageElement } from "../../framework/page-element";
-import {
-  getHeight,
-  createElement,
-  randomFactory,
-  sum,
-  isChrome
-} from "../../framework/helper";
-import { PageEvent, PageEventType } from "../../framework/page-event";
-import { Blob } from "./blob";
-import { generate } from "./background.html";
+import { PageElement } from '../../framework/page-element';
+import { PageEvent, PageEventType } from '../../framework/page-event';
+import { createElement } from '../../framework/helper/create-element';
+import { Blob } from './blob';
+import { generate } from './background.html';
+import { Random } from '../../framework/helper/random';
+import { getHeight } from '../../framework/helper/get-height';
+import { sum } from '../../framework/helper/sum';
 
 export class PageBackground extends PageElement {
   private readonly blobs: Array<Blob> = [];
   private readonly blobSpacing = 350;
-  private previousWidth: number;
-  private previousHeight: number;
-  private previousScrollPositionToSet: number = 0;
-  private previousTimestamp: DOMHighResTimeStamp = null;
-  private readonly baseDeltaTime = (1 / 30) * 1000;
-  private readonly maxBaseSpeedInPixels = 20;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
     this.setElement(createElement(generate()));
-    if (isChrome()) {
-      this.query("#background").style.transformStyle = "preserve-3d";
-    }
     Blob.initialize(10, 30, 5);
   }
 
@@ -38,46 +26,14 @@ export class PageBackground extends PageElement {
   }
 
   private bindListeners(parent: PageElement) {
-    window.addEventListener("resize", () => this.resize(parent));
-    window.addEventListener("load", () => this.resize(parent));
-    window.requestAnimationFrame(timestamp =>
-      this.scrollContainer(timestamp, parent)
-    );
-  }
-
-  private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
-    const deltaTime = this.getDeltaTime(timestamp);
-    const scrollPositionToSet = parent.getElement().scrollTop;
-    const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
-    this.previousScrollPositionToSet = scrollPositionToSet;
-
-    const threshold = 2;
-    if (deltaScroll > threshold) {
-      const smoothDeltaScroll =
-        (deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime);
-      this.getElement().scrollTop += smoothDeltaScroll;
-    } else {
-      const error = scrollPositionToSet - this.getElement().scrollTop;
-      if (Math.abs(error) > threshold) {
-        this.getElement().scrollTop += Math.min(
-          error / 4,
-          this.maxBaseSpeedInPixels,
-          error
-        );
-      }
-    }
-
-    window.requestAnimationFrame(timestamp =>
-      this.scrollContainer(timestamp, parent)
-    );
-  }
-
-  private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
-    const deltaTime = this.previousTimestamp
-      ? timestamp - this.previousTimestamp
-      : 0;
-    this.previousTimestamp = timestamp;
-    return deltaTime;
+    window.addEventListener('resize', () => this.resize(parent));
+    window.addEventListener('load', () => this.resize(parent));
+    parent
+      .getElement()
+      .addEventListener(
+        'scroll',
+        () => (this.getElement().scrollTop = parent.getElement().scrollTop)
+      );
   }
 
   private resize(parent: PageElement, heightChange?: number) {
@@ -89,14 +45,8 @@ export class PageBackground extends PageElement {
       height += heightChange;
     }
 
-    if (this.previousHeight === height && this.previousWidth === width) {
-      return;
-    }
-    this.previousHeight = height;
-    this.previousWidth = width;
-
-    this.query("#background").style.width = `${width}px`;
-    this.query("#background").style.height = `${height}px`;
+    this.query('#background').style.width = `${width}px`;
+    this.query('#background').style.height = `${height}px`;
 
     const requiredBlobCount = Math.round(
       (width * height) / this.blobSpacing ** 2
@@ -104,11 +54,11 @@ export class PageBackground extends PageElement {
 
     while (requiredBlobCount > this.blobs.length) {
       const blob = new Blob();
-      this.query("#background").appendChild(blob.htmlElement);
+      this.query('#background').appendChild(blob.htmlElement);
       this.blobs.push(blob);
     }
 
-    const random = randomFactory(2662);
+    const random = new Random(2662);
 
     this.blobs.forEach((b, i) => {
       if (i >= requiredBlobCount) {

src/page/background/blob.ts

@@ -1,14 +1,10 @@
-import {
-  choose,
-  createElement,
-  mixColors,
-  randomFactory,
-  randomInInterval
-} from "../../framework/helper";
+import { mixColors } from '../../framework/helper/color-mixer';
+import { createElement } from '../../framework/helper/create-element';
+import { Random } from '../../framework/helper/random';
 
 export class Blob {
-  private static readonly creatorRandom = randomFactory(44);
-  private static readonly colors = ["#fff9e0", "#ffd6d6"];
+  private static readonly creatorRandom = new Random(44);
+  private static readonly colors = ['#fff9e0', '#ffd6d6'];
   private static zMin: number;
   private static zMax: number;
   private static perspective: number;
@@ -18,26 +14,22 @@ export class Blob {
     Blob.perspective = perspective;
   }
 
-  private readonly z = randomInInterval(
+  private readonly z = Blob.creatorRandom.randomInInterval(
     Blob.zMin,
-    Blob.zMax,
-    Blob.creatorRandom
+    Blob.zMax
   );
 
-  private readonly element: HTMLElement = createElement("<div></div>");
+  private readonly element: HTMLElement = createElement('<div></div>');
   constructor() {
-    this.element.style.backgroundColor =
-      "#" +
-      mixColors(
-        "#ffffff",
-        choose(Blob.colors, Blob.creatorRandom),
-        (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
-      );
+    this.element.style.backgroundColor = mixColors(
+      '#ffffff',
+      Blob.creatorRandom.choose(Blob.colors),
+      (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
+    );
     this.element.style.zIndex = (-this.z).toString();
-    this.element.style.height = `${randomInInterval(
+    this.element.style.height = `${Blob.creatorRandom.randomInInterval(
       160,
-      740,
-      Blob.creatorRandom
+      740
     )}px`;
   }
 
@@ -46,7 +38,7 @@ export class Blob {
   }
 
   private randomWithKnownZ(
-    random: () => number,
+    random: Random,
     viewportSize: number,
     scrollSize: number,
     startOffset = 0,
@@ -67,19 +59,19 @@ export class Blob {
     const l =
       scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
 
-    return randomInInterval(lowerBound, lowerBound + l, random);
+    return random.randomInInterval(lowerBound, lowerBound + l);
   }
 
   public show() {
-    this.element.style.opacity = "1";
+    this.element.style.opacity = '1';
   }
 
   public hide() {
-    this.element.style.opacity = "0";
+    this.element.style.opacity = '0';
   }
 
   public transform(
-    random: () => number,
+    random: Random,
     width: number,
     viewportHeight: number,
     scrollHeight: number,
@@ -98,7 +90,7 @@ export class Blob {
       translateZ(${-this.z}px)
       rotate(-20deg)
     `;
-    this.element.style["-webkit-transform"] = value;
+    this.element.style['-webkit-transform'] = value;
     this.element.style.transform = value;
   }
 }