andras/schmelczer-dev
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity Actions

Mostly done

Browse source
This commit is contained in:
Schmelczer András 2019-12-29 15:30:41 +01:00
parent 632a7703ff
commit 10015a4ebe
23 changed files with 258 additions and 158 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/page/background/background.scss
View file

@ -9,16 +9,16 @@
transform-style: preserve-3d;
overflow: hidden;
transition: height $slow-transition-time, width $slow-transition-time;
transition: height $long-transition-time, width $long-transition-time;
div {
border-radius: 10000px;
position: absolute;
left: 0;
top: 0;
width: 160px;
width: 130px;
transition: transform $slow-transition-time, opacity $slow-transition-time;
transition: transform $long-transition-time, opacity $long-transition-time;
animation: fade-in 1s linear;
@keyframes fade-in {

15
src/page/background/background.ts
View file

@ -11,12 +11,12 @@ import { generate } from "./background.html";
export class PageBackground extends PageElement {
private blobs: Array<Blob> = [];
private blobSpacing = 300;
private blobSpacing = 350;
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate()));
Blob.initialize(20, 40, 5);
Blob.initialize(10, 30, 5);
}
protected handleEvent(event: PageEvent, parent: PageElement) {
@ -24,7 +24,7 @@ export class PageBackground extends PageElement {
this.bindListeners(parent);
this.resize(parent);
} else if (event.type === PageEventType.onBodyDimensionsChanged) {
this.resize(parent, event.data.deltaHeight);
this.resize(parent, event.data?.deltaHeight);
}
}
@ -44,10 +44,9 @@ export class PageBackground extends PageElement {
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;
const requiredBlobCount =
width > 900 ? Math.round((width * height) / this.blobSpacing ** 2) : 0;
console.log(requiredBlobCount);
const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2
);
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
@ -55,7 +54,7 @@ export class PageBackground extends PageElement {
this.blobs.push(blob);
}
const random = randomFactory(2322);
const random = randomFactory(2662);
this.blobs.forEach((b, i) => {
if (i >= requiredBlobCount) {

2
src/page/background/blob.ts
View file

@ -7,7 +7,7 @@ import {
} from "../../framework/helper";
export class Blob {
private static readonly creatorRandom = randomFactory(42);
private static readonly creatorRandom = randomFactory(44);
private static readonly colors = ["#fff9e0", "#ffd6d6"];
private static zMin: number;
private static zMax: number;