Fix lagging

src/page/background/animation.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from "./vec2";
+import { Vec2 } from './vec2';
 
 export class Animation {
   private _value: Vec2;

src/page/background/background.html.ts

@@ -2,5 +2,7 @@ import { html } from "../../model/misc";
 import "./background.scss";
 
 export const generate = (): html => `
-    <canvas id="background"></canvas>
+    <section id="background-container">
+        <section id="background"></section>
+    </section>
 `;

src/page/background/background.scss

@@ -1,11 +1,44 @@
 @import "../../style/vars";
 @import "../../style/mixins";
 
-canvas#background {
+#background-container {
   position: fixed;
-  top: 0;
   left: 0;
+  top: 0;
   height: 100vh;
   width: 100%;
-  z-index: -10;
+
+  z-index: -1;
+  -webkit-overflow-scrolling: touch;
+  perspective: 5px;
+  perspective-origin: center center;
+  overflow: hidden;
+
+  #background {
+    overflow: hidden;
+    will-change: width, height;
+    transition: height $long-transition-time, width $long-transition-time;
+    transform-style: flat;
+
+    div {
+      position: -webkit-sticky;
+      position: absolute;
+      left: 0;
+      top: 0;
+      border-radius: 100px;
+      width: 140px;
+
+      transition: transform $long-transition-time, opacity $long-transition-time;
+      will-change: transform, opacity;
+      animation: fade-in 1s linear;
+      @keyframes fade-in {
+        from {
+          opacity: 0;
+        }
+        to {
+          opacity: 1;
+        }
+      }
+    }
+  }
 }

src/page/background/background.ts

@@ -1,31 +1,20 @@
-import { PageElement } from "../../framework/page-element";
-import { getHeight, createElement, sum } from "../../framework/helper";
-import { PageEvent, PageEventType } from "../../framework/page-event";
-import { Blob } from "./blob";
-import { generate } from "./background.html";
-import { Animation } from "./animation";
-import { Vec3 } from "./vec3";
-import { Vec2 } from "./vec2";
+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 = 140;
-  private readonly perspective = 5;
-  private readonly zMin = 10;
-  private readonly zMax = 30;
-  private readonly animationTime = 350;
-  private backgroundSize: Animation;
-  private scrollPosition: number = 0;
-  private previousTimestamp: DOMHighResTimeStamp = null;
-  private readonly canvas: HTMLCanvasElement;
-  private readonly ctx: CanvasRenderingContext2D;
+  private readonly blobSpacing = 350;
 
   public constructor(private start: PageElement, private end: PageElement) {
     super();
-    this.canvas = createElement(generate()) as HTMLCanvasElement;
-    this.ctx = this.canvas.getContext("2d");
-    this.setElement(this.canvas);
-    Blob.initialize(this.zMin, this.zMax);
+    this.setElement(createElement(generate()));
+    Blob.initialize(10, 30, 5);
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
@@ -37,49 +26,55 @@ export class PageBackground extends PageElement {
   }
 
   private bindListeners(parent: PageElement) {
-    window.addEventListener("resize", () => this.resize(parent));
-    window.addEventListener("load", e => {
-      this.resize(parent);
-      this.redraw(e.timeStamp, parent);
-    });
+    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) {
-    this.resizeCanvas();
-    this.resizeBackground(parent, heightChange);
-  }
-
-  private resizeCanvas() {
-    this.canvas.width = this.canvas.clientWidth;
-    this.canvas.height = this.canvas.clientHeight;
-  }
-
-  private resizeBackground(parent: PageElement, heightChange?: number) {
-    const targetWidth = parent.getElement().clientWidth;
-
     const siblings: Array<HTMLElement> = this.getSiblings(parent);
-    let targetHeight = sum(siblings.map(getHeight));
+
+    const width = parent.getElement().clientWidth;
+    let height = sum(siblings.map(getHeight));
     if (heightChange) {
-      targetHeight += heightChange;
+      height += heightChange;
     }
 
-    const targetSize = new Vec2(targetWidth, targetHeight);
+    this.query('#background').style.width = `${width}px`;
+    this.query('#background').style.height = `${height}px`;
 
-    this.backgroundSize = new Animation(
-      this.backgroundSize ? this.backgroundSize.value : targetSize,
-      targetSize,
-      this.animationTime,
-      backgroundSize =>
-        this.blobs.forEach(blob => {
-          const topLeft = this.convertFrom2Dto3D(Vec2.Zero, blob.z);
-          const bottomRight = this.convertFrom2Dto3D(
-            backgroundSize,
-            blob.z,
-            backgroundSize.y - this.canvas.height
-          );
-          blob.positionScale = bottomRight.subtract(topLeft);
-        })
+    const requiredBlobCount = Math.round(
+      (width * height) / this.blobSpacing ** 2
     );
+
+    while (requiredBlobCount > this.blobs.length) {
+      const blob = new Blob();
+      this.query('#background').appendChild(blob.htmlElement);
+      this.blobs.push(blob);
+    }
+
+    const random = new Random(2662);
+
+    this.blobs.forEach((b, i) => {
+      if (i >= requiredBlobCount) {
+        b.hide();
+      } else {
+        b.transform(
+          random,
+          width,
+          parent.getElement().clientHeight,
+          height,
+          getHeight(this.start.getElement()),
+          getHeight(this.end.getElement())
+        );
+        b.show();
+      }
+    });
   }
 
   private getSiblings(parent: PageElement): Array<HTMLElement> {
@@ -87,77 +82,4 @@ export class PageBackground extends PageElement {
       .call(parent.getElement().children)
       .filter(e => e !== this.getElement());
   }
-
-  private redraw(timestamp: DOMHighResTimeStamp, parent: PageElement) {
-    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-
-    const deltaTime = this.getDeltaTime(timestamp);
-    this.backgroundSize.step(deltaTime);
-    this.scrollPosition = parent.getElement().scrollTop;
-    const requiredBlobCount = this.requiredBlobCount;
-
-    while (requiredBlobCount > this.blobs.length) {
-      this.blobs.push(new Blob());
-    }
-
-    this.blobs.sort((b1, b2) => b2.z - b1.z);
-
-    this.blobs.forEach((blob, i) => {
-      if (i >= requiredBlobCount) {
-        return;
-      }
-
-      const topLeft = this.convertFrom3Dto2D(blob.topLeft);
-      const bottomRight = this.convertFrom3Dto2D(
-        blob.topLeft.add(Vec3.from(blob.size, 0))
-      );
-
-      if (this.isInView(topLeft) || this.isInView(bottomRight)) {
-        blob.draw(this.ctx, topLeft, bottomRight.subtract(topLeft));
-      }
-    });
-
-    window.requestAnimationFrame(timestamp => this.redraw(timestamp, parent));
-  }
-
-  private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
-    const deltaTime = this.previousTimestamp
-      ? timestamp - this.previousTimestamp
-      : 0;
-    this.previousTimestamp = timestamp;
-    return Math.max(0, deltaTime);
-  }
-
-  private convertFrom3Dto2D(p: Vec3): Vec2 {
-    const m = this.perspective / (this.perspective + p.z);
-    return new Vec2(
-      m * (p.z / 2 + p.x),
-      m * (p.z / 2 + p.y - this.scrollPosition)
-    );
-  }
-
-  private convertFrom2Dto3D(
-    p: Vec2,
-    z: number,
-    scrollPosition: number = 0
-  ): Vec2 {
-    const m = 1 + z / this.perspective;
-    return new Vec2(p.x * m - z / 2, p.y * m - z / 2 + scrollPosition);
-  }
-
-  private isInView(p: Vec2): boolean {
-    return (
-      0 <= p.x &&
-      p.x <= this.canvas.width &&
-      0 <= p.y &&
-      p.y <= this.canvas.height
-    );
-  }
-
-  private get requiredBlobCount(): number {
-    return Math.round(
-      (this.backgroundSize.value.x * this.backgroundSize.value.y) /
-        this.blobSpacing ** 2
-    );
-  }
 }

src/page/background/blob.ts

@@ -1,74 +1,96 @@
-import {
-  choose,
-  mixColors,
-  randomFactory,
-  randomInInterval
-} from "../../framework/helper";
-import { Vec2 } from "./vec2";
-import { Vec3 } from "./vec3";
+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 rotation = (-20 / 180) * Math.PI;
-
+  private static readonly creatorRandom = new Random(44);
+  private static readonly colors = ['#fff9e0', '#ffd6d6'];
   private static zMin: number;
   private static zMax: number;
-  public static initialize(zMin: number, zMax: number) {
+  private static perspective: number;
+  public static initialize(zMin: number, zMax: number, perspective: number) {
     Blob.zMin = zMin;
     Blob.zMax = zMax;
+    Blob.perspective = perspective;
   }
 
-  public readonly z = randomInInterval(
+  private readonly z = Blob.creatorRandom.randomInInterval(
     Blob.zMin,
-    Blob.zMax,
-    Blob.creatorRandom
+    Blob.zMax
   );
 
-  private readonly positionQ = new Vec2(
-    Blob.creatorRandom(),
-    Blob.creatorRandom()
-  );
-  private _positionScale = new Vec2(0, 0);
-
-  private readonly _size = new Vec2(
-    140,
-    randomInInterval(160, 740, Blob.creatorRandom)
-  );
-  private readonly color =
-    "#" +
-    mixColors(
-      "#ffffff",
-      choose(Blob.colors, Blob.creatorRandom),
+  private readonly element: HTMLElement = createElement('<div></div>');
+  constructor() {
+    this.element.style.backgroundColor = mixColors(
+      '#ffffff',
+      Blob.creatorRandom.choose(Blob.colors),
       (this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)
     );
-
-  public get topLeft(): Vec3 {
-    return Vec3.from(this.positionQ.multiply(this._positionScale), this.z);
+    this.element.style.zIndex = (-this.z).toString();
+    this.element.style.height = `${Blob.creatorRandom.randomInInterval(
+      160,
+      740
+    )}px`;
   }
 
-  public get size(): Vec2 {
-    return this._size;
+  get htmlElement(): HTMLElement {
+    return this.element;
   }
 
-  public set positionScale(value: Vec2) {
-    this._positionScale = value;
+  private randomWithKnownZ(
+    random: Random,
+    viewportSize: number,
+    scrollSize: number,
+    startOffset = 0,
+    endOffset = 0
+  ): number {
+    const m = 1 + this.z / Blob.perspective;
+
+    const variableOffset = (offset, q) =>
+      Math.max(
+        0,
+        offset - ((this.z - Blob.zMin) / (Blob.zMax - Blob.zMin)) * (offset * q)
+      );
+
+    startOffset = variableOffset(startOffset, 1);
+    endOffset = variableOffset(endOffset, 0.2);
+
+    const lowerBound = viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
+    const l =
+      scrollSize - viewportSize + (viewportSize - startOffset - endOffset) * m;
+
+    return random.randomInInterval(lowerBound, lowerBound + l);
   }
 
-  public draw(ctx: CanvasRenderingContext2D, position: Vec2, size: Vec2) {
-    ctx.save();
+  public show() {
+    this.element.style.opacity = '1';
+  }
 
-    ctx.translate(position.x, position.y);
-    ctx.rotate(Blob.rotation);
+  public hide() {
+    this.element.style.opacity = '0';
+  }
 
-    ctx.beginPath();
-    ctx.arc(0, size.x / 2 - size.y / 2, size.x / 2, Math.PI, 0);
-    ctx.arc(0, size.y / 2 - size.x / 2, size.x / 2, 0, Math.PI);
-    ctx.closePath();
-
-    ctx.fillStyle = this.color;
-    ctx.fill();
-
-    ctx.restore();
+  public transform(
+    random: Random,
+    width: number,
+    viewportHeight: number,
+    scrollHeight: number,
+    startOffset: number,
+    endOffset: number
+  ) {
+    const value = `
+      translateX(${this.randomWithKnownZ(random, width, width)}px)
+      translateY(${this.randomWithKnownZ(
+        random,
+        viewportHeight,
+        scrollHeight,
+        startOffset,
+        endOffset
+      )}px)
+      translateZ(${-this.z}px)
+      rotate(-20deg)
+    `;
+    this.element.style['-webkit-transform'] = value;
+    this.element.style.transform = value;
   }
 }

src/page/background/vec3.ts

@@ -1,4 +1,4 @@
-import { Vec2 } from "./vec2";
+import { Vec2 } from './vec2';
 
 export class Vec3 {
   public static readonly Zero = new Vec3(0, 0, 0);