Fix lagging

src/page/about/about.scss

@@ -1,5 +1,5 @@
-@import "../../style/mixins";
-@import "../../style/vars";
+@import '../../style/mixins';
+@import '../../style/vars';
 
 #about {
   @include important-card();

src/page/about/about.ts

@@ -1,9 +1,9 @@
-import { PageContent } from "../content/content";
-import { Header } from "../../model/portfolio";
-import { PageElement } from "../../framework/page-element";
+import { PageContent } from '../content/content';
+import { Header } from '../../model/portfolio';
+import { PageElement } from '../../framework/page-element';
 
-import { generate } from "./about.html";
-import { createElement } from "../../framework/helper";
+import { generate } from './about.html';
+import { createElement } from '../../framework/helper/create-element';
 
 export class PageHeader extends PageElement {
   public constructor(header: Header) {

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);

src/page/content/content.scss

@@ -1,4 +1,4 @@
-@import "../../style/vars";
+@import '../../style/vars';
 
 .content {
   margin-top: $small-margin;

src/page/content/content.ts

@@ -1,8 +1,9 @@
-import { Content, TypedContent } from "../../model/content";
-import "./content.scss";
-import { PageElement } from "../../framework/page-element";
-import { createElement, last } from "../../framework/helper";
-import { html } from "../../model/misc";
+import { Content, TypedContent } from '../../model/content';
+import './content.scss';
+import { PageElement } from '../../framework/page-element';
+import { createElement } from '../../framework/helper/create-element';
+import { html } from '../../model/misc';
+import { last } from '../../framework/helper/last';
 
 export class PageContent extends PageElement {
   private static isTyped(content): content is TypedContent {
@@ -13,10 +14,10 @@ export class PageContent extends PageElement {
     element: TypedContent,
     disableInnerShadow?: boolean
   ): html {
-    if (element.type === "a") {
+    if (element.type === 'a') {
       return `<a href="${element.href}" rel="noreferrer" target="_blank"> ${element.text} </a>`;
     }
-    if (element.type === "video") {
+    if (element.type === 'video') {
       return `
           <video ${element.options}>
               <source src="${element.webm}" type="video/webm"/>
@@ -24,19 +25,19 @@ export class PageContent extends PageElement {
           </video>
       `;
     }
-    if (element.type === "img") {
+    if (element.type === 'img') {
       return `
-            ${!disableInnerShadow ? `<div class="image-container">` : ""}
+            ${!disableInnerShadow ? `<div class="image-container">` : ''}
                 <img 
                     srcset="${element.image.srcSet}" 
                     src="${last(element.image.images).path}" 
                     alt="${element.alt}"
                 />
-            ${!disableInnerShadow ? `</div>` : ""}
+            ${!disableInnerShadow ? `</div>` : ''}
       `;
     }
 
-    throw new Error("Unhandled type.");
+    throw new Error('Unhandled type.');
   }
 
   public constructor(content: Content) {
@@ -51,7 +52,7 @@ export class PageContent extends PageElement {
                   ? PageContent.parseTypedContent(element)
                   : `<p>${element}</p>`
               )
-              .join("\n")}
+              .join('\n')}
         </div>
       `)
     );

src/page/footer/footer.scss

@@ -1,5 +1,5 @@
-@import "../../style/mixins";
-@import "../../style/vars";
+@import '../../style/mixins';
+@import '../../style/vars';
 
 footer#page-footer {
   text-align: center;

src/page/footer/footer.ts

@@ -1,8 +1,8 @@
-import { Footer } from "../../model/portfolio";
-import { PageElement } from "../../framework/page-element";
+import { Footer } from '../../model/portfolio';
+import { PageElement } from '../../framework/page-element';
 
-import { generate } from "./footer.html";
-import { createElement } from "../../framework/helper";
+import { generate } from './footer.html';
+import { createElement } from '../../framework/helper/create-element';
 
 export class PageFooter extends PageElement {
   constructor(footer: Footer) {

src/page/image-viewer/image-viewer.scss

@@ -1,5 +1,5 @@
-@import "../../style/vars";
-@import "../../style/mixins";
+@import '../../style/vars';
+@import '../../style/mixins';
 
 #image-viewer {
   @include center-children();

src/page/image-viewer/image-viewer.ts

@@ -1,8 +1,8 @@
-import { PageElement } from "../../framework/page-element";
+import { PageElement } from '../../framework/page-element';
 
-import { generate } from "./image-viewer.html";
-import { createElement } from "../../framework/helper";
-import { PageEvent, PageEventType } from "../../framework/page-event";
+import { generate } from './image-viewer.html';
+import { PageEvent, PageEventType } from '../../framework/page-event';
+import { createElement } from '../../framework/helper/create-element';
 
 export class PageImageViewer extends PageElement {
   public constructor() {
@@ -17,16 +17,16 @@ export class PageImageViewer extends PageElement {
       return;
     }
 
-    document.body.addEventListener("keydown", this.handleKeydown.bind(this));
+    document.body.addEventListener('keydown', this.handleKeydown.bind(this));
 
     const images = Array.prototype.slice.call(
-      parent.getElement().querySelectorAll("img")
+      parent.getElement().querySelectorAll('img')
     );
     images
       .filter(
         (img: HTMLImageElement) =>
           img.parentElement !== this.getElement() &&
-          !img.classList.contains("no-open")
+          !img.classList.contains('no-open')
       )
       .forEach(
         (img: HTMLImageElement) => (img.onclick = this.handleClick.bind(this))
@@ -35,22 +35,22 @@ export class PageImageViewer extends PageElement {
 
   private handleClick(event: Event) {
     (this.query(
-      "#photo"
+      '#photo'
     ) as HTMLImageElement).src = (event.target as HTMLImageElement).src;
 
     PageImageViewer.show(this.getElement());
   }
 
   private handleKeydown(event: KeyboardEvent) {
-    if (event.key === "Escape") {
+    if (event.key === 'Escape') {
       PageImageViewer.hide(this.getElement());
     }
   }
 
   private static show(e: HTMLElement) {
-    e.style.display = "flex";
+    e.style.display = 'flex';
   }
   private static hide(e: HTMLElement) {
-    e.style.display = "none";
+    e.style.display = 'none';
   }
 }

src/page/timeline/timeline-element/timeline-element.scss

@@ -1,5 +1,5 @@
-@import "../../../style/mixins";
-@import "../../../style/vars";
+@import '../../../style/mixins';
+@import '../../../style/vars';
 
 .timeline-element {
   display: flex;
@@ -9,7 +9,7 @@
     border-left: $line-width solid $accent-color;
 
     &:before {
-      content: "";
+      content: '';
       @include square($icon-size);
       position: absolute;
       left: calc(-0.5 * #{$icon-size} - (1.5 * #{$line-width}));

src/page/timeline/timeline-element/timeline-element.ts

@@ -1,9 +1,9 @@
-import { TimelineElement } from "../../../model/portfolio";
-import { PageContent } from "../../content/content";
-import { PageElement } from "../../../framework/page-element";
-import { generate } from "./timeline-element.html";
-import { createElement } from "../../../framework/helper";
-import { PageEventType } from "../../../framework/page-event";
+import { TimelineElement } from '../../../model/portfolio';
+import { PageContent } from '../../content/content';
+import { PageElement } from '../../../framework/page-element';
+import { generate } from './timeline-element.html';
+import { PageEventType } from '../../../framework/page-event';
+import { createElement } from '../../../framework/helper/create-element';
 
 export class PageTimelineElement extends PageElement {
   private isOpen;
@@ -20,19 +20,19 @@ export class PageTimelineElement extends PageElement {
       const content = new PageContent(timelineElement.more);
       super([content]);
       this.isOpen = false;
-      this.more = root.querySelector(".more");
+      this.more = root.querySelector('.more');
       this.more.appendChild(content.getElement());
-      window.addEventListener("resize", this.handleResize.bind(this));
+      window.addEventListener('resize', this.handleResize.bind(this));
       root
-        .querySelector(".buttons")
-        .addEventListener("click", this.toggleOpen.bind(this));
+        .querySelector('.buttons')
+        .addEventListener('click', this.toggleOpen.bind(this));
     } else super();
     this.setElement(root);
   }
 
   private toggleOpen() {
-    const showMore = this.query(".show-more") as HTMLElement;
-    const showLess = this.query(".show-less") as HTMLElement;
+    const showMore = this.query('.show-more') as HTMLElement;
+    const showLess = this.query('.show-less') as HTMLElement;
     if (this.isOpen) {
       PageTimelineElement.show(showMore);
       PageTimelineElement.hide(showLess);
@@ -49,28 +49,28 @@ export class PageTimelineElement extends PageElement {
   private notifyOfHeightChange(deltaHeight: number = undefined) {
     this.eventBroadcaster?.broadcastEvent({
       type: PageEventType.onBodyDimensionsChanged,
-      data: { deltaHeight }
+      data: { deltaHeight },
     });
 
     setTimeout(
       () =>
         this.eventBroadcaster?.broadcastEvent({
-          type: PageEventType.onBodyDimensionsChanged
+          type: PageEventType.onBodyDimensionsChanged,
         }),
       350
     );
   }
 
   private static hide(element: HTMLElement) {
-    element.style.opacity = "0";
+    element.style.opacity = '0';
     setTimeout(() => {
-      element.style.visibility = "hidden";
+      element.style.visibility = 'hidden';
     }, 350);
   }
 
   private static show(element: HTMLElement) {
-    element.style.visibility = "visible";
-    element.style.opacity = "1";
+    element.style.visibility = 'visible';
+    element.style.opacity = '1';
   }
 
   private openMore() {
@@ -81,13 +81,13 @@ export class PageTimelineElement extends PageElement {
 
   private closeMore() {
     const deltaHeight = this.more.scrollHeight;
-    this.more.style.height = "0";
+    this.more.style.height = '0';
     this.notifyOfHeightChange(-deltaHeight);
   }
 
   private handleResize() {
     if (this.isOpen) {
-      this.more.style.height = "auto";
+      this.more.style.height = 'auto';
       setTimeout(this.openMore.bind(this), 200);
     }
   }

src/page/timeline/timeline.scss

@@ -1,4 +1,4 @@
-@import "../../style/vars";
+@import '../../style/vars';
 
 #timeline {
   width: $body-width;

src/page/timeline/timeline.ts

@@ -1,8 +1,8 @@
-import { TimelineElement } from "../../model/portfolio";
-import { PageElement } from "../../framework/page-element";
-import { PageTimelineElement } from "./timeline-element/timeline-element";
-import { generate } from "./timeline.html";
-import { createElement } from "../../framework/helper";
+import { TimelineElement } from '../../model/portfolio';
+import { PageElement } from '../../framework/page-element';
+import { PageTimelineElement } from './timeline-element/timeline-element';
+import { generate } from './timeline.html';
+import { createElement } from '../../framework/helper/create-element';
 
 export class PageTimeline extends PageElement {
   public constructor(