From c2dbf995cc8f1301eae3af0df2bd97e3e316d3b9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Schmelczer=20Andr=C3=A1s?= Date: Mon, 23 Dec 2019 14:39:49 +0100 Subject: [PATCH] Add parallax --- .idea/workspace.xml | 42 +++++-------------- src/framework/helper.ts | 5 +++ src/page/about/about.html.ts | 1 + src/page/about/about.ts | 1 - src/page/background/background.html.ts | 23 ++++++++++ src/page/background/background.scss | 26 ++++++++++++ src/page/background/background.ts | 24 +++++++++++ src/page/footer/footer.html.ts | 1 + src/page/footer/footer.ts | 1 - src/page/image-viewer/image-viewer.html.ts | 1 + src/page/image-viewer/image-viewer.ts | 4 -- src/page/index.ts | 3 ++ .../timeline-element/timeline-element.html.ts | 1 + .../timeline-element/timeline-element.ts | 1 - src/page/timeline/timeline.html.ts | 1 + src/page/timeline/timeline.ts | 1 - src/style/vars.scss | 8 ++-- src/styles.scss | 14 +------ 18 files changed, 102 insertions(+), 56 deletions(-) create mode 100644 src/page/background/background.html.ts create mode 100644 src/page/background/background.scss create mode 100644 src/page/background/background.ts diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 753b593..4f7317c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -2,44 +2,24 @@ - - - - - - - - + + + - - - - - - + + - - + - + - + + - + - - - - - - - - - - - diff --git a/src/framework/helper.ts b/src/framework/helper.ts index a9b26d8..b455e47 100644 --- a/src/framework/helper.ts +++ b/src/framework/helper.ts @@ -25,3 +25,8 @@ const hexToRGB = (hex: string): [number, number, number] => { const RGBToHex = (rgb: [number, number, number]): string => rgb.map(n => Math.round(n).toString(16)).join(""); + +export const randomFactory = seed => () => + ((2 ** 31 - 1) & (seed = Math.imul(48271, seed))) / 2 ** 31; + +export const fixedSeedRandom = randomFactory(42); diff --git a/src/page/about/about.html.ts b/src/page/about/about.html.ts index 9827889..e87aa1c 100644 --- a/src/page/about/about.html.ts +++ b/src/page/about/about.html.ts @@ -1,5 +1,6 @@ import { Header } from "../../model/portfolio"; import { html } from "../../model/misc"; +import "./about.scss"; export const generate = ( { name, picture, about }: Header, diff --git a/src/page/about/about.ts b/src/page/about/about.ts index d2f5e69..f50c8fc 100644 --- a/src/page/about/about.ts +++ b/src/page/about/about.ts @@ -4,7 +4,6 @@ import { PageElement } from "../../framework/page-element"; import { createElement } from "../../framework/element-factory"; import { generate } from "./about.html"; -import "./about.scss"; export class PageHeader extends PageElement { public constructor(header: Header, aPictureOf: string) { diff --git a/src/page/background/background.html.ts b/src/page/background/background.html.ts new file mode 100644 index 0000000..cfa91e2 --- /dev/null +++ b/src/page/background/background.html.ts @@ -0,0 +1,23 @@ +import { html } from "../../model/misc"; +import "./background.scss"; +import { fixedSeedRandom } from "../../framework/helper"; + +export const generate = ( + count: number, + probability: number, + width: number, + color: string +): html => ` +
+ ${new Array(count) + .fill(0, 0, count) + .map(_ => + fixedSeedRandom() < probability + ? `
` + : `
` + ) + .join("")} +
+`; diff --git a/src/page/background/background.scss b/src/page/background/background.scss new file mode 100644 index 0000000..f36d197 --- /dev/null +++ b/src/page/background/background.scss @@ -0,0 +1,26 @@ +@import "../../style/vars"; +@import "../../style/mixins"; + +.background { + position: fixed; + left: 0; + top: 0; + display: flex; + flex-wrap: wrap; + justify-content: space-evenly; + margin-top: -20vh; + width: 100%; + height: 100%; + z-index: -1; + + div { + border-radius: 10000px; + margin: 10vh 10vw; + + transform: rotate(-20deg); + + &.gap { + visibility: hidden; + } + } +} diff --git a/src/page/background/background.ts b/src/page/background/background.ts new file mode 100644 index 0000000..1cb1c95 --- /dev/null +++ b/src/page/background/background.ts @@ -0,0 +1,24 @@ +import { PageElement } from "../../framework/page-element"; +import { createElement } from "../../framework/element-factory"; +import { generate } from "./background.html"; + +export class PageBackground extends PageElement { + public constructor( + private speed: number, + count: number, + width: number, + probability: number, + color: string + ) { + super(); + this.setElement(createElement(generate(count, probability, width, color))); + } + + public onAfterLoad(parent: HTMLElement) { + window.addEventListener("scroll", () => { + this.getElement().style.transform = `translateY(-${window.scrollY * + this.speed}px)`; + }); + super.onAfterLoad(parent); + } +} diff --git a/src/page/footer/footer.html.ts b/src/page/footer/footer.html.ts index 9cf8dfd..9073eea 100644 --- a/src/page/footer/footer.html.ts +++ b/src/page/footer/footer.html.ts @@ -1,5 +1,6 @@ import { Footer } from "../../model/portfolio"; import { html } from "../../model/misc"; +import "./footer.scss"; export const generate = ({ email, cv }: Footer, cvName: string): html => `