Remove scrolling filter effect

microsoft · May 29, 2020 · 23e4558 · 23e4558
1 parent fa27954
commit 23e4558
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 59 deletions.
diff --git a/sites/fast-website/src/app/components/background-design/background-design.styles.ts b/sites/fast-website/src/app/components/background-design/background-design.styles.ts
@@ -5,7 +5,6 @@ import { neutralFillRestBehavior } from "@microsoft/fast-components";
 export const BackgroundDesignStyles = css`
     ${display("block")} :host {
         contain: content;
-        filter: blur(calc(var(--blur-amount) * 65px));
         height: 99vh; /* https://developers.google.com/web/updates/2016/12/url-bar-resizing */
         isolation: isolate;
         position: fixed;

diff --git a/sites/fast-website/src/app/components/background-design/background-design.template.ts b/sites/fast-website/src/app/components/background-design/background-design.template.ts
@@ -3,7 +3,7 @@ import BackgroundImage from "svg/background.svg";
 import { BackgroundDesign } from "./background-design";
 
 export const BackgroundDesignTemplate = html<BackgroundDesign>`
-    <template style="--blur-amount: ${x => x.blurAmount}">
+    <template>
         <div class="background-image">
             ${BackgroundImage}
         </div>

diff --git a/sites/fast-website/src/app/components/background-design/background-design.ts b/sites/fast-website/src/app/components/background-design/background-design.ts
@@ -1,58 +1,3 @@
-import { FASTElement, observable } from "@microsoft/fast-element";
+import { FASTElement } from "@microsoft/fast-element";
 
-export class BackgroundDesign extends FASTElement {
-    private animationFrame: number | void;
-    private cachedClientHeight: number = this.clientHeight;
-    private resizeTimeout: number | void;
-    private scrollTimeout: number | void;
-
-    @observable
-    public blurAmount: number = 0;
-
-    constructor() {
-        super();
-
-        window.addEventListener("resize", this.resizeHandler, { passive: true });
-        window.addEventListener("scroll", this.scrollHandler, { passive: true });
-
-        // trigger both events in case we're viewing a page refresh
-        window.dispatchEvent(new Event("resize"));
-        window.dispatchEvent(new Event("scroll"));
-    }
-
-    private resizeHandler = (): void => {
-        if (this.resizeTimeout) {
-            this.resizeTimeout = window.clearTimeout(this.resizeTimeout);
-        }
-
-        this.resizeTimeout = window.setTimeout(this.setCachedClientHeight, 150);
-    };
-
-    private setCachedClientHeight = (): void => {
-        this.cachedClientHeight = this.clientHeight;
-    };
-
-    private render = (): void => {
-        const amount = window.scrollY / this.cachedClientHeight;
-        this.blurAmount = amount < 1 ? amount : 1;
-        this.animationFrame = window.requestAnimationFrame(this.render);
-    };
-
-    private cancelAnimationLoop = (): void => {
-        if (this.animationFrame) {
-            this.animationFrame = window.cancelAnimationFrame(this.animationFrame);
-        }
-    };
-
-    private scrollHandler = (): void => {
-        if (this.scrollTimeout) {
-            window.clearTimeout(this.scrollTimeout);
-        }
-
-        if (!this.animationFrame) {
-            this.animationFrame = window.requestAnimationFrame(this.render);
-        }
-
-        this.scrollTimeout = window.setTimeout(this.cancelAnimationLoop, 150);
-    };
-}
+export class BackgroundDesign extends FASTElement {}