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

7
.idea/workspace.xml generated
View file

@ -3,10 +3,15 @@
<component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/framework/helper.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/framework/helper.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/src/index.html" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/about/about.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/about/about.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.html.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.html.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/background.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/background.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/webpack.config.js" beforeDir="false" afterPath="$PROJECT_DIR$/webpack.config.js" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" />

15
package.json
View file

@ -18,12 +18,24 @@
"resumé"
],
"author": "András Schmelczer",
"license": "ISC",
"license": "UNLICENSED",
"bugs": {
"url": "https://github.com/schmelczerandras/timeline/issues"
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"last 2 version",
"not dead",
"iOS >= 9",
"> 0.2%"
],
"homepage": "https://github.com/schmelczerandras/timeline#readme",
"devDependencies": {
"autoprefixer": "^9.7.3",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.0",
"file-loader": "^5.0.2",
@ -32,6 +44,7 @@
"mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "^1.19.1",
"resolve-url-loader": "^3.1.1",
"responsive-loader": "^1.2.0",

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;
}
}

10
webpack.config.js
View file

@ -22,6 +22,7 @@ module.exports = {
new HtmlWebpackPlugin({
hash: true,
xhtml: true,
minify: true,
template: "./src/index.html"
}),
new MiniCssExtractPlugin({
@ -109,12 +110,9 @@ module.exports = {
{
test: /\.scss$/i,
use: [
{
loader: MiniCssExtractPlugin.loader
},
{
loader: "css-loader"
},
MiniCssExtractPlugin.loader,
"css-loader",
"postcss-loader",
{
loader: "resolve-url-loader",
options: {