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

it works

Browse source
This commit is contained in:
Schmelczer András 2019-12-30 13:57:42 +01:00
parent 2ee4e36888
commit 82a0ce6ec0
5 changed files with 65 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

19
.idea/workspace.xml generated
View file

@ -3,10 +3,9 @@
<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$/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/page/background/blob.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/background/blob.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/page/timeline/timeline-element/timeline-element.scss" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles.scss" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles.scss" afterDir="false" />
</list>
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
@ -40,7 +39,7 @@
<property name="SHARE_PROJECT_CONFIGURATION_FILES" value="true" />
<property name="WebServerToolWindowFactoryState" value="false" />
<property name="ignore_missing_gitignore" value="true" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src/static" />
<property name="last_opened_file_path" value="$PROJECT_DIR$/src/page/background" />
<property name="node.js.detected.package.stylelint" value="true" />
<property name="node.js.path.for.package.stylelint" value="project" />
<property name="node.js.selected.package.stylelint" value="" />
@ -50,6 +49,12 @@
<property name="ts.external.directory.path" value="C:\Projects\portfolio\CompiledCV\node_modules\typescript\lib" />
</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\page\background" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static\fonts" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\cv" />
@ -57,11 +62,6 @@
<recent name="C:\Projects\portfolio\CompiledCV\src" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\no-change" />
</key>
<key name="CopyFile.RECENT_KEYS">
<recent name="C:\Projects\portfolio\CompiledCV\src\static" />
<recent name="C:\Projects\portfolio\CompiledCV\src\static\icons" />
<recent name="$PROJECT_DIR$" />
</key>
</component>
<component name="RunDashboard">
<option name="ruleStates">
@ -105,7 +105,8 @@
<workItem from="1577469180612" duration="18000" />
<workItem from="1577526744211" duration="46374000" />
<workItem from="1577639259221" duration="3798000" />
<workItem from="1577662869335" duration="4081000" />
<workItem from="1577662869335" duration="6536000" />
<workItem from="1577702567470" duration="3227000" />
</task>
<servers />
</component>

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

@ -2,5 +2,7 @@ import { html } from "../../model/misc";
import "./background.scss";
export const generate = (): html => `
<section id="background"></section>
<section id="background-container">
<section id="background"></section>
</section>
`;

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

@ -1,32 +1,43 @@
@import "../../style/vars";
@import "../../style/mixins";
#background {
#background-container {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
-webkit-overflow-scrolling: touch;
perspective: 5px;
perspective-origin: center center;
overflow: hidden;
will-change: width, height;
transition: height $long-transition-time, width $long-transition-time;
div {
border-radius: 100px;
position: absolute;
left: -1000vh;
top: -1000vh;
margin: 1000vh;
width: 7px;
#background {
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
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
div {
position: -webkit-sticky;
border-radius: 100px;
position: absolute;
left: 0;
top: 0;
width: 7px;
transition: transform $long-transition-time, opacity $long-transition-time;
will-change: transform, opacity;
animation: fade-in 1s linear;
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
}
}

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

@ -14,6 +14,7 @@ export class PageBackground extends PageElement {
private blobSpacing = 350;
private previousWidth: number;
private previousHeight: number;
private scrollPositionToSet: number = null;
public constructor(private start: PageElement, private end: PageElement) {
super();
@ -33,6 +34,23 @@ 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));
}
private saveScrollPosition(parent: PageElement) {
this.scrollPositionToSet = parent.getElement().scrollTop;
}
private scrollContainer(parent: PageElement) {
if (this.scrollPositionToSet !== null) {
this.getElement().scrollTo(0, this.scrollPositionToSet);
this.scrollPositionToSet = null;
}
window.requestAnimationFrame(() => this.scrollContainer(parent));
}
private resize(parent: PageElement, heightChange?: number) {
@ -50,8 +68,8 @@ export class PageBackground extends PageElement {
this.previousHeight = height;
this.previousWidth = width;
this.getElement().style.width = `${width}px`;
this.getElement().style.height = `${height}px`;
this.query("#background").style.width = `${width}px`;
this.query("#background").style.height = `${height}px`;
const requiredBlobCount = Math.round(
(width * height) / this.blobSpacing ** 2
@ -59,7 +77,7 @@ export class PageBackground extends PageElement {
while (requiredBlobCount > this.blobs.length) {
const blob = new Blob();
this.getElement().appendChild(blob.htmlElement);
this.query("#background").appendChild(blob.htmlElement);
this.blobs.push(blob);
}

5
src/styles.scss
View file

@ -30,11 +30,8 @@ body {
& > main {
height: 100%;
overflow-y: auto;
overflow-y: scroll;
overflow-x: hidden;
perspective-origin: center center;
perspective: 5px;
will-change: scroll-position, transform;
noscript {
@include square(100%);