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"> <component name="ChangeListManager">
<list default="true" id="8edc47ab-1265-4111-9771-536b24cc9310" name="Default Changelist" comment=""> <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$/.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.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.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/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> </list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" /> <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />

15
package.json
View file

@ -18,12 +18,24 @@
"resumé" "resumé"
], ],
"author": "András Schmelczer", "author": "András Schmelczer",
"license": "ISC", "license": "UNLICENSED",
"bugs": { "bugs": {
"url": "https://github.com/schmelczerandras/timeline/issues" "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", "homepage": "https://github.com/schmelczerandras/timeline#readme",
"devDependencies": { "devDependencies": {
"autoprefixer": "^9.7.3",
"clean-webpack-plugin": "^3.0.0", "clean-webpack-plugin": "^3.0.0",
"css-loader": "^3.4.0", "css-loader": "^3.4.0",
"file-loader": "^5.0.2", "file-loader": "^5.0.2",
@ -32,6 +44,7 @@
"mini-css-extract-plugin": "^0.9.0", "mini-css-extract-plugin": "^0.9.0",
"node-sass": "^4.13.0", "node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^5.0.3", "optimize-css-assets-webpack-plugin": "^5.0.3",
"postcss-loader": "^3.0.0",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"resolve-url-loader": "^3.1.1", "resolve-url-loader": "^3.1.1",
"responsive-loader": "^1.2.0", "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 => { export const createElement = (from: html): HTMLElement => {
const element: HTMLElement = document.createElement("div"); const element: HTMLElement = document.createElement("div");
@ -91,3 +91,5 @@ export const range = ({
export const last = <T>(list: Array<T>): T => export const last = <T>(list: Array<T>): T =>
list.length > 0 ? list[list.length - 1] : undefined; 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> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="utf-8" />
<meta property="og:image:width" content="1500"> <meta property="og:image:width" content="1500">
<meta property="og:image:height" content="785"> <meta property="og:image:height" content="785">

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

@ -25,6 +25,10 @@
margin-top: $small-margin; margin-top: $small-margin;
} }
h1 {
hyphens: none;
}
@media (max-width: $breakpoint-width) { @media (max-width: $breakpoint-width) {
h1 { h1 {
margin-top: $small-margin; 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-container">
<section id="background"></section> <section id="background"></section>
</section> </section>
<div id="edge-hack"></div>
`; `;

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

@ -18,15 +18,15 @@
overflow: hidden; overflow: hidden;
will-change: width, height; will-change: width, height;
transition: height $long-transition-time, width $long-transition-time; transition: height $long-transition-time, width $long-transition-time;
transform-style: preserve-3d; // really important for performance on mobile devices transform-style: flat;
div { div {
position: -webkit-sticky; position: -webkit-sticky;
border-radius: 100px;
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
width: 7px; border-radius: 100px;
width: 140px;
transition: transform $long-transition-time, opacity $long-transition-time; transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity; 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, getHeight,
createElement, createElement,
randomFactory, randomFactory,
sum sum,
isChrome
} from "../../framework/helper"; } from "../../framework/helper";
import { PageEvent, PageEventType } from "../../framework/page-event"; import { PageEvent, PageEventType } from "../../framework/page-event";
import { Blob } from "./blob"; import { Blob } from "./blob";
import { generate } from "./background.html"; import { generate } from "./background.html";
export class PageBackground extends PageElement { export class PageBackground extends PageElement {
private blobs: Array<Blob> = []; private readonly blobs: Array<Blob> = [];
private blobSpacing = 350; private readonly blobSpacing = 350;
private previousWidth: number; private previousWidth: number;
private previousHeight: 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) { public constructor(private start: PageElement, private end: PageElement) {
super(); super();
this.setElement(createElement(generate())); this.setElement(createElement(generate()));
if (isChrome()) {
this.query("#background").style.transformStyle = "preserve-3d";
}
Blob.initialize(10, 30, 5); Blob.initialize(10, 30, 5);
} }
@ -34,23 +41,44 @@ export class PageBackground extends PageElement {
private bindListeners(parent: PageElement) { private bindListeners(parent: PageElement) {
window.addEventListener("resize", () => this.resize(parent)); window.addEventListener("resize", () => this.resize(parent));
window.addEventListener("load", () => this.resize(parent)); window.addEventListener("load", () => this.resize(parent));
parent window.requestAnimationFrame(timestamp =>
.getElement() this.scrollContainer(timestamp, parent)
.addEventListener("scroll", () => this.saveScrollPosition(parent)); );
window.requestAnimationFrame(() => this.scrollContainer(parent));
} }
private saveScrollPosition(parent: PageElement) { private scrollContainer(timestamp: DOMHighResTimeStamp, parent: PageElement) {
this.scrollPositionToSet = parent.getElement().scrollTop; const deltaTime = this.getDeltaTime(timestamp);
} const scrollPositionToSet = parent.getElement().scrollTop;
const deltaScroll = scrollPositionToSet - this.previousScrollPositionToSet;
this.previousScrollPositionToSet = scrollPositionToSet;
private scrollContainer(parent: PageElement) { const threshold = 2;
if (this.scrollPositionToSet !== null) { if (deltaScroll > threshold) {
this.getElement().scrollTo(0, this.scrollPositionToSet); const smoothDeltaScroll =
this.scrollPositionToSet = null; (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) { 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.zIndex = (-this.z).toString();
this.element.style.height = `${randomInInterval( this.element.style.height = `${randomInInterval(
8, 160,
37, 740,
Blob.creatorRandom Blob.creatorRandom
)}px`; )}px`;
} }
@ -86,7 +86,7 @@ export class Blob {
startOffset: number, startOffset: number,
endOffset: number endOffset: number
) { ) {
this.element.style.transform = ` const value = `
translateX(${this.randomWithKnownZ(random, width, width)}px) translateX(${this.randomWithKnownZ(random, width, width)}px)
translateY(${this.randomWithKnownZ( translateY(${this.randomWithKnownZ(
random, random,
@ -95,9 +95,10 @@ export class Blob {
startOffset, startOffset,
endOffset endOffset
)}px) )}px)
scale(20)
translateZ(${-this.z}px) translateZ(${-this.z}px)
rotate(-20deg) 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({ new HtmlWebpackPlugin({
hash: true, hash: true,
xhtml: true, xhtml: true,
minify: true,
template: "./src/index.html" template: "./src/index.html"
}), }),
new MiniCssExtractPlugin({ new MiniCssExtractPlugin({
@ -109,12 +110,9 @@ module.exports = {
{ {
test: /\.scss$/i, test: /\.scss$/i,
use: [ use: [
{ MiniCssExtractPlugin.loader,
loader: MiniCssExtractPlugin.loader "css-loader",
}, "postcss-loader",
{
loader: "css-loader"
},
{ {
loader: "resolve-url-loader", loader: "resolve-url-loader",
options: { options: {