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

Make more cross-browser compatible

Browse source
This commit is contained in:
Schmelczer András 2019-12-30 21:01:27 +01:00
parent 82a0ce6ec0
commit 7f18e75647
10 changed files with 89 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/framework/helper.ts
View file

@ -1,4 +1,4 @@
import { html, ResponsiveImage } from "../model/misc";
import { html } from "../model/misc";
export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement("div");
@ -91,3 +91,5 @@ export const range = ({
export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined;
export const isChrome = (): boolean => !!navigator.appVersion.match(/chrome/i);

2
src/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta charset="utf-8" />
<meta property="og:image:width" content="1500">
<meta property="og:image:height" content="785">

4
src/page/about/about.scss
View file

@ -25,6 +25,10 @@
margin-top: $small-margin;
}
h1 {
hyphens: none;
}
@media (max-width: $breakpoint-width) {
h1 {
margin-top: $small-margin;

1
src/page/background/background.html.ts
View file

@ -5,4 +5,5 @@ export const generate = (): html => `
<section id="background-container">
<section id="background"></section>
</section>
<div id="edge-hack"></div>
`;

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

@ -18,15 +18,15 @@
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
transform-style: preserve-3d; // really important for performance on mobile devices
transform-style: flat;
div {
position: -webkit-sticky;
border-radius: 100px;
position: absolute;
left: 0;
top: 0;
width: 7px;
border-radius: 100px;
width: 140px;
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
@ -42,3 +42,7 @@
}
}
}
#edge-hack {
position: fixed;
}

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

@ -3,22 +3,29 @@ import {
getHeight,
createElement,
randomFactory,
sum
sum,
isChrome
} from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob";
import { generate } from "./background.html";
export class PageBackground extends PageElement {
private blobs: Array<Blob> = [];
private blobSpacing = 350;
private readonly blobs: Array<Blob> = [];
private readonly blobSpacing = 350;
private previousWidth: number;
private previousHeight: number;
private scrollPositionToSet: number = null;
private previousScrollPositionToSet: number = 0;
private previousTimestamp: DOMHighResTimeStamp = null;
private readonly baseDeltaTime = (1 / 30) * 1000;
private readonly maxBaseSpeedInPixels = 20;
public constructor(private start: PageElement, private end: PageElement) {
super();
this.setElement(createElement(generate()));
if (isChrome()) {
this.query("#background").style.transformStyle = "preserve-3d";
}
Blob.initialize(10, 30, 5);
}
@ -34,23 +41,44 @@ export class PageBackground extends PageElement {
private bindListeners(parent: PageElement) {
window.addEventListener("resize", () => this.resize(parent));
window.addEventListener("load", () => this.resize(parent));
parent
.getElement()
.addEventListener("scroll", () => this.saveScrollPosition(parent));
window.requestAnimationFrame(() => this.scrollContainer(parent));
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
}
private saveScrollPosition(parent: PageElement) {
this.scrollPositionToSet = parent.getElement().scrollTop;
}
private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
const deltaTime = this.getDeltaTime(timestamp);
const scrollPositionToSet = parent.getElement().scrollTop;
const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
this.previousScrollPositionToSet = scrollPositionToSet;
private scrollContainer(parent: PageElement) {
if (this.scrollPositionToSet !== null) {
this.getElement().scrollTo(0, this.scrollPositionToSet);
this.scrollPositionToSet = null;
const threshold = 2;
if (deltaScroll > threshold) {
const smoothDeltaScroll =
(deltaScroll / deltaTime) * Math.min(deltaTime, this.baseDeltaTime);
this.getElement().scrollTop += smoothDeltaScroll;
} else {
const error = scrollPositionToSet - this.getElement().scrollTop;
if (Math.abs(error) > threshold) {
this.getElement().scrollTop += Math.min(
error / 4,
this.maxBaseSpeedInPixels,
error
);
}
}
window.requestAnimationFrame(() => this.scrollContainer(parent));
window.requestAnimationFrame(timestamp =>
this.scrollContainer(timestamp, parent)
);
}
private getDeltaTime(timestamp: DOMHighResTimeStamp): number {
const deltaTime = this.previousTimestamp
? timestamp - this.previousTimestamp
: 0;
this.previousTimestamp = timestamp;
return deltaTime;
}
private resize(parent: PageElement, heightChange?: number) {

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

@ -35,8 +35,8 @@ export class Blob {
);
this.element.style.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval(
8,
37,
160,
740,
Blob.creatorRandom
)}px`;
}
@ -86,7 +86,7 @@ export class Blob {
startOffset: number,
endOffset: number
) {
this.element.style.transform = `
const value = `
translateX(${this.randomWithKnownZ(random, width, width)}px)
translateY(${this.randomWithKnownZ(
random,
@ -95,9 +95,10 @@ export class Blob {
startOffset,
endOffset
)}px)
scale(20)
translateZ(${-this.z}px)
rotate(-20deg)
`;
this.element.style["-webkit-transform"] = value;
this.element.style.transform = value;
}
}