102 lines
2.4 KiB
TypeScript
102 lines
2.4 KiB
TypeScript
import {
|
|
choose,
|
|
createElement,
|
|
mixColors,
|
|
randomFactory,
|
|
randomInInterval
|
|
} from "../../framework/helper";
|
|
|
|
export class Blob {
|
|
private static readonly creatorRandom = randomFactory(42);
|
|
private static readonly colors = ["#fff9e0", "#ffd6d6"];
|
|
private static zMin: number;
|
|
private static zMax: number;
|
|
private static perspective: number;
|
|
public static initialize(zMin: number, zMax: number, perspective: number) {
|
|
Blob.zMin = zMin;
|
|
Blob.zMax = zMax;
|
|
Blob.perspective = perspective;
|
|
}
|
|
|
|
private readonly z = randomInInterval(
|
|
Blob.zMin,
|
|
Blob.zMax,
|
|
Blob.creatorRandom
|
|
);
|
|
|
|
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.zIndex = (-this.z).toString();
|
|
this.element.style.height = `${randomInInterval(
|
|
160,
|
|
750,
|
|
Blob.creatorRandom
|
|
)}px`;
|
|
}
|
|
|
|
get htmlElement(): HTMLElement {
|
|
return this.element;
|
|
}
|
|
|
|
private randomWithKnownZ(
|
|
random: () => number,
|
|
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 randomInInterval(lowerBound, lowerBound + l, random);
|
|
}
|
|
|
|
public show() {
|
|
this.element.style.opacity = "1";
|
|
}
|
|
|
|
public hide() {
|
|
this.element.style.opacity = "0";
|
|
}
|
|
|
|
public transform(
|
|
random: () => number,
|
|
width: number,
|
|
viewportHeight: number,
|
|
scrollHeight: number,
|
|
startOffset: number,
|
|
endOffset: number
|
|
) {
|
|
this.element.style.transform = `
|
|
translateX(${this.randomWithKnownZ(random, width, width)}px)
|
|
translateY(${this.randomWithKnownZ(
|
|
random,
|
|
viewportHeight,
|
|
scrollHeight,
|
|
startOffset,
|
|
endOffset
|
|
)}px)
|
|
translateZ(${-this.z}px)
|
|
rotate(-20deg)
|
|
`;
|
|
}
|
|
}
|