quicksave

src/page/background/background.html.ts

@@ -3,21 +3,26 @@ import "./background.scss";
 
 export const generate = (
   count: number,
-  color?: () => string,
+  z?: () => number,
+  color?: (z) => string,
   height?: () => number,
   isAnimated?: (index) => boolean,
-  transform?: () => string
-): html => `
+  transform?: (z) => string
+): html => {
+  return `
     <section class="background">
         ${
           count > 0
             ? new Array(count)
                 .fill(0, 0, count)
+                .map(_ => z())
                 .map(
-                  (_, i) => `
-                    <div class="${
-                      isAnimated(i) ? "animated" : ""
-                    }" style="background-color: ${color()}; height: ${height()}px; transform: ${transform()}"
+                  (zValue, i) => `
+                    <div class="${isAnimated(i) ? "animated" : ""}" style="
+                        background-color: ${color(zValue)};
+                        height: ${height()}px;
+                        z-index: ${-zValue};
+                        transform: ${transform(zValue)}"
                     ></div>
                 `
                 )
@@ -26,3 +31,4 @@ export const generate = (
         }
     </section>
 `;
+};

src/page/background/background.scss

@@ -18,6 +18,8 @@
     top: 0;
     width: 160px;
 
+    transition: transform $slow-transition-time;
+
     &.animated {
       animation: fade-in 1s linear forwards;
       @keyframes fade-in {

src/page/background/background.ts

@@ -2,94 +2,117 @@ import { PageElement } from "../../framework/page-element";
 import { generate } from "./background.html";
 import {
   choose,
+  getHeight,
   createElement,
   randomFactory,
   randomInInterval,
-  sum
+  sum,
+  mixColors
 } from "../../framework/helper";
 import { PageEvent, PageEventType } from "../../framework/page-event";
 
 export class PageBackground extends PageElement {
-  private colors = ["#fff9e077", "#ffd6d677"];
-  private blobSize = 150; // with margin
+  private colors = ["#fff9e0", "#ffd6d6"];
+  private blobSpacing = 200;
   private perspective = 5;
   private currentRealHeight = 0;
   private currentRealWidth = 0;
   private currentBlobCount = 0;
 
-  public constructor() {
+  public constructor(private start: PageElement, private end: PageElement) {
     super();
     this.setElement(createElement(generate(0)));
   }
 
   protected handleEvent(event: PageEvent, parent: PageElement) {
     if (event.type === PageEventType.onLoad) {
-      window.addEventListener("resize", this.resize.bind(this, parent));
-      window.addEventListener("load", this.resize.bind(this, parent));
+      this.bindListeners(parent);
     } else if (event.type === PageEventType.onBodyDimensionsChanged) {
       this.resize(parent);
     }
   }
 
+  private bindListeners(parent: PageElement) {
+    window.addEventListener("resize", this.resize.bind(this, parent));
+    window.addEventListener("load", this.resize.bind(this, parent));
+  }
+
   private resize(parent: PageElement) {
     const siblings: Array<HTMLElement> = Array.prototype.slice
       .call(parent.getElement().children)
       .filter(e => e !== this.getElement());
 
-    const width = document.body.clientWidth;
-
-    const height = sum(
-      siblings.map(c => {
-        const computedStyle = window.getComputedStyle(c);
-        return (
-          // ignores margin collapse
-          c.clientHeight +
-          parseInt(computedStyle.marginTop) +
-          parseInt(computedStyle.marginBottom) +
-          parseInt(computedStyle.borderTopWidth) +
-          parseInt(computedStyle.borderBottomWidth)
-        );
-      })
-    );
+    const width = parent.getElement().clientWidth;
+    const height = sum(siblings.map(getHeight));
 
     if (height > this.currentRealHeight || width > this.currentRealWidth) {
       this.currentRealHeight = height;
       this.currentRealWidth = width;
 
-      const random = randomFactory(44);
+      const random = randomFactory(46);
 
-      const count = Math.round((width * height) / this.blobSize ** 2);
+      const zMin = 20;
+      const zMax = 40;
 
-      const randomWithKnownZ = (z: number, bound: number): number => {
-        const l = (bound * (this.perspective + z)) / this.perspective;
-        return randomInInterval(
-          -(l / 2 - bound / 2),
-          l / 2 + bound / 2,
-          random
-        );
+      const count = Math.round((width * height) / this.blobSpacing ** 2);
+
+      const randomWithKnownZ = (
+        z: number,
+        viewportSize: number,
+        scrollSize: number,
+        startOffset = 0,
+        endOffset = 0
+      ): number => {
+        const m = 1 + z / this.perspective;
+
+        const variableOffset = (offset, q) =>
+          offset - ((z - zMin) / (zMax - zMin)) * (offset * q);
+
+        startOffset = variableOffset(startOffset, 0.6);
+        endOffset = variableOffset(endOffset, 0.2);
+
+        const lowerBound =
+          viewportSize / 2 - (viewportSize / 2 - startOffset) * m;
+        const l =
+          scrollSize -
+          viewportSize +
+          (viewportSize - startOffset - endOffset) * m;
+
+        return randomInInterval(lowerBound, lowerBound + l, random);
       };
 
       this.setElement(
         createElement(
           generate(
             count,
-            () => choose(this.colors, random),
+            () => randomInInterval(zMin, zMax, random),
+            z =>
+              "#" +
+              mixColors(
+                "#ffffff",
+                choose(this.colors, random),
+                (z - zMin) / (zMax - zMin)
+              ),
             () => randomInInterval(160, 750, random),
             i => i >= this.currentBlobCount,
-            () => {
-              const z = randomInInterval(-12, -25, random);
-              return `
-              translateX(${randomWithKnownZ(-z, width)}px)
-              translateY(${randomWithKnownZ(-z, height)}px)
-              translateZ(${z}px)
+            z => `
+              translateX(${randomWithKnownZ(z, width, width)}px)
+              translateY(${randomWithKnownZ(
+                z,
+                parent.getElement().clientHeight,
+                height,
+                getHeight(this.start.getElement()),
+                getHeight(this.end.getElement())
+              )}px)
+              translateZ(${-z}px)
               rotate(-20deg)
-            `;
-            }
+            `
           )
         )
       );
 
       this.currentBlobCount = count;
+      console.log(count);
     }
     this.getElement().style.width = `${width}px`;
     this.getElement().style.height = `${height}px`;