diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f93c4bc..a9fd10c 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -6,9 +6,8 @@
-
+
-
@@ -106,6 +105,7 @@
+
diff --git a/src/page/background/background.scss b/src/page/background/background.scss
index ed62e3f..cf16a4d 100644
--- a/src/page/background/background.scss
+++ b/src/page/background/background.scss
@@ -7,20 +7,19 @@
top: 0;
z-index: -1;
overflow: hidden;
-
will-change: width, height;
-
transition: height $long-transition-time, width $long-transition-time;
div {
- border-radius: 10000px;
+ border-radius: 100px;
position: absolute;
- left: 0;
- top: 0;
- width: 130px;
+ left: -1000vh;
+ top: -1000vh;
+ margin: 1000vh;
+ width: 7px;
transition: transform $long-transition-time, opacity $long-transition-time;
-
+ will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
diff --git a/src/page/background/background.ts b/src/page/background/background.ts
index 66c5767..8107329 100644
--- a/src/page/background/background.ts
+++ b/src/page/background/background.ts
@@ -12,6 +12,8 @@ import { generate } from "./background.html";
export class PageBackground extends PageElement {
private blobs: Array = [];
private blobSpacing = 350;
+ private previousWidth: number;
+ private previousHeight: number;
public constructor(private start: PageElement, private end: PageElement) {
super();
@@ -41,6 +43,13 @@ export class PageBackground extends PageElement {
if (heightChange) {
height += heightChange;
}
+
+ if (this.previousHeight === height && this.previousWidth === width) {
+ return;
+ }
+ this.previousHeight = height;
+ this.previousWidth = width;
+
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;
diff --git a/src/page/background/blob.ts b/src/page/background/blob.ts
index be1caee..c54d443 100644
--- a/src/page/background/blob.ts
+++ b/src/page/background/blob.ts
@@ -35,8 +35,8 @@ export class Blob {
);
this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval(
- 160,
- 750,
+ 8,
+ 37,
Blob.creatorRandom
)}px`;
}
@@ -95,6 +95,7 @@ export class Blob {
startOffset,
endOffset
)}px)
+ scale(20)
translateZ(${-this.z}px)
rotate(-20deg)
`;
diff --git a/src/page/timeline/timeline-element/timeline-element.scss b/src/page/timeline/timeline-element/timeline-element.scss
index 5a88f55..72c75af 100644
--- a/src/page/timeline/timeline-element/timeline-element.scss
+++ b/src/page/timeline/timeline-element/timeline-element.scss
@@ -53,6 +53,7 @@
.line {
@include center-children();
+ justify-content: flex-start;
height: 150px;
width: 50%;
diff --git a/src/styles.scss b/src/styles.scss
index 2c1e9e4..8db910b 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,16 +29,17 @@ body {
height: 100%;
& > main {
- noscript {
- @include square(100%);
- @include center-children();
- }
-
height: 100%;
overflow-y: auto;
overflow-x: hidden;
perspective-origin: center center;
perspective: 5px;
+ will-change: scroll-position, transform;
+
+ noscript {
+ @include square(100%);
+ @include center-children();
+ }
@media (min-width: $breakpoint-width) {
&::-webkit-scrollbar-track,