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

Fix background

Browse source
This commit is contained in:
Andras Schmelczer 2022-01-24 23:14:34 +01:00
parent 2eff310a77
commit 7bf026a4f8
No known key found for this signature in database
GPG key ID: 39260B5B0614A13E
2 changed files with 14 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -3,6 +3,8 @@
#background { #background {
transform-style: preserve-3d; transform-style: preserve-3d;
z-index: -1;
position: absolute;
} }
.blob { .blob {
@ -11,7 +13,6 @@
top: 0; top: 0;
border-radius: 1000px; border-radius: 1000px;
transition: background-color var(--transition-time); transition: background-color var(--transition-time);
transform: translateX(-100%);
&:nth-child(odd) { &:nth-child(odd) {
background-color: #fff9e0; background-color: #fff9e0;

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

@ -79,23 +79,30 @@ export class PageBackground extends PageElement {
this.random.seed = 50; this.random.seed = 50;
this.blobs.forEach((b) => { this.blobs.forEach((b) => {
const z = -Number.parseInt(b.style.zIndex); const z = -Number.parseInt(b.style.zIndex);
const [x, y] = this.randomXY(z, topOffset, bottomOffset); const [x, y] = this.randomXY(z, topOffset, bottomOffset, parseInt(b.style.height));
b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`; b.style.transform = `translate3D(${x}px, ${y}px, ${-z}px) rotate(-20deg)`;
}); });
} }
private randomXY(z: number, topOffset: number, bottomOffset: number): [number, number] { private randomXY(
z: number,
topOffset: number,
bottomOffset: number,
height: number
): [number, number] {
const farTop = -( const farTop = -(
((this.windowHeight / 2 - topOffset) / PageBackground.perspective) * ((this.windowHeight / 2 - topOffset) / PageBackground.perspective) *
(PageBackground.zMax + PageBackground.perspective) - (PageBackground.zMax + PageBackground.perspective) -
this.windowHeight / 2 this.windowHeight / 2
); );
const farBottom = const farBottom = Math.min(
((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) * ((this.windowHeight / 2 - bottomOffset) / PageBackground.perspective) *
(PageBackground.zMax + PageBackground.perspective) - (PageBackground.zMax + PageBackground.perspective) -
this.windowHeight / 2 + this.windowHeight / 2 +
this.contentHeight; this.contentHeight,
this.contentHeight - height
);
const endXSpan = const endXSpan =
((this.windowWidth / PageBackground.perspective) * ((this.windowWidth / PageBackground.perspective) *