From 120ae39c2e37c703e4e0b9bd4c9376a8fc2c0625 Mon Sep 17 00:00:00 2001 From: Wolf Date: Sun, 11 Dec 2022 16:54:43 +0100 Subject: [PATCH 1/3] feat(website): rework the website hero + animated taiko image --- .../website/src/components/Hero/index.tsx | 49 ++++++++++++++++--- 1 file changed, 42 insertions(+), 7 deletions(-) diff --git a/packages/website/src/components/Hero/index.tsx b/packages/website/src/components/Hero/index.tsx index 71978fb3272..dfc3b4c39e3 100644 --- a/packages/website/src/components/Hero/index.tsx +++ b/packages/website/src/components/Hero/index.tsx @@ -1,22 +1,52 @@ import React from "react"; export default function Hero() { + // Enlarges and decreases the opacity of the taikoGeom image upon scroll + const changeTaikoGeom = () => { + const taikoGeom = document.getElementById("taikoGeom"); + const taikoGeomParent = document.getElementById("taikoGeomParent"); + const elementHeight = window.pageYOffset; + + // Enlarge the TaikoGeom width on scroll + if (window.innerWidth.valueOf() < 500) { + taikoGeomParent.style.width = `${ + window.innerWidth.valueOf() / 1 + elementHeight * 9 + }px`; + + // Lower the TaikoGeom opacity on scroll + // Smaller screens need a faster decrease + if (1 - elementHeight * 0.003 >= 0) { + taikoGeom.style.opacity = `${ + (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) * 0.8 + }`; + } + } else { + taikoGeomParent.style.width = `${ + window.innerWidth.valueOf() / 2 + elementHeight * 9 + }px`; + + // Lower the TaikoGeom opacity on scroll + taikoGeom.style.opacity = `${(1 - elementHeight / 250) * 0.8}`; + } + }; + window.addEventListener("scroll", changeTaikoGeom); + return (
-
-
+
+

A Type 1 ZK-EVM

-

+

Fully decentralized, Ethereum-equivalent ZK-Rollup.

-
+
Get started @@ -24,9 +54,14 @@ export default function Hero() {
-
+ +
From 9a7bb46aca70c0a7a8cb954c4636d4117648f072 Mon Sep 17 00:00:00 2001 From: Wolf Date: Mon, 12 Dec 2022 16:26:57 +0100 Subject: [PATCH 2/3] fix(website): window usage client side only --- .../website/src/components/Hero/index.tsx | 52 ++++++++++--------- 1 file changed, 27 insertions(+), 25 deletions(-) diff --git a/packages/website/src/components/Hero/index.tsx b/packages/website/src/components/Hero/index.tsx index dfc3b4c39e3..afaa688dce4 100644 --- a/packages/website/src/components/Hero/index.tsx +++ b/packages/website/src/components/Hero/index.tsx @@ -2,34 +2,36 @@ import React from "react"; export default function Hero() { // Enlarges and decreases the opacity of the taikoGeom image upon scroll - const changeTaikoGeom = () => { - const taikoGeom = document.getElementById("taikoGeom"); - const taikoGeomParent = document.getElementById("taikoGeomParent"); - const elementHeight = window.pageYOffset; + if (typeof window !== "undefined") { + const changeTaikoGeom = () => { + const taikoGeom = document.getElementById("taikoGeom"); + const taikoGeomParent = document.getElementById("taikoGeomParent"); + const elementHeight = window.pageYOffset; - // Enlarge the TaikoGeom width on scroll - if (window.innerWidth.valueOf() < 500) { - taikoGeomParent.style.width = `${ - window.innerWidth.valueOf() / 1 + elementHeight * 9 - }px`; + // Enlarge the TaikoGeom width on scroll + if (window.innerWidth.valueOf() < 500) { + taikoGeomParent.style.width = `${ + window.innerWidth.valueOf() / 1 + elementHeight * 9 + }px`; - // Lower the TaikoGeom opacity on scroll - // Smaller screens need a faster decrease - if (1 - elementHeight * 0.003 >= 0) { - taikoGeom.style.opacity = `${ - (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) * 0.8 - }`; - } - } else { - taikoGeomParent.style.width = `${ - window.innerWidth.valueOf() / 2 + elementHeight * 9 - }px`; + // Lower the TaikoGeom opacity on scroll + // Smaller screens need a faster decrease + if (1 - elementHeight * 0.003 >= 0) { + taikoGeom.style.opacity = `${ + (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) * 0.8 + }`; + } + } else { + taikoGeomParent.style.width = `${ + window.innerWidth.valueOf() / 2 + elementHeight * 9 + }px`; - // Lower the TaikoGeom opacity on scroll - taikoGeom.style.opacity = `${(1 - elementHeight / 250) * 0.8}`; - } - }; - window.addEventListener("scroll", changeTaikoGeom); + // Lower the TaikoGeom opacity on scroll + taikoGeom.style.opacity = `${(1 - elementHeight / 250) * 0.8}`; + } + }; + window.addEventListener("scroll", changeTaikoGeom); + } return (
From 0c6eb3be4113e9c4fa25dcc865ca00e0850cf9b1 Mon Sep 17 00:00:00 2001 From: Wolf Date: Tue, 13 Dec 2022 00:41:40 +0100 Subject: [PATCH 3/3] fix(website): implement feedback z-index, opacity --- packages/website/src/components/Hero/index.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/website/src/components/Hero/index.tsx b/packages/website/src/components/Hero/index.tsx index afaa688dce4..f4c8ed9a692 100644 --- a/packages/website/src/components/Hero/index.tsx +++ b/packages/website/src/components/Hero/index.tsx @@ -11,14 +11,14 @@ export default function Hero() { // Enlarge the TaikoGeom width on scroll if (window.innerWidth.valueOf() < 500) { taikoGeomParent.style.width = `${ - window.innerWidth.valueOf() / 1 + elementHeight * 9 + window.innerWidth.valueOf() * 0.91666667 + elementHeight * 9 }px`; // Lower the TaikoGeom opacity on scroll // Smaller screens need a faster decrease if (1 - elementHeight * 0.003 >= 0) { taikoGeom.style.opacity = `${ - (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) * 0.8 + (1 - elementHeight * 0.003) * (1 - elementHeight * 0.003) }`; } } else { @@ -27,7 +27,7 @@ export default function Hero() { }px`; // Lower the TaikoGeom opacity on scroll - taikoGeom.style.opacity = `${(1 - elementHeight / 250) * 0.8}`; + taikoGeom.style.opacity = `${1 - elementHeight / 250}`; } }; window.addEventListener("scroll", changeTaikoGeom); @@ -36,7 +36,7 @@ export default function Hero() { return (
-
+

A Type 1 ZK-EVM @@ -63,7 +63,7 @@ export default function Hero() { >