feat(website): rework the website hero + animated taiko image #414
Conversation
|
@wolfderechter is attempting to deploy a commit to the taikoxyz Team on Vercel. A member of the Team first needs to authorize it. |
|
i am seeing a vercel error @wolfderechter , do you know why? this looks great at least from the screenshot, thank you for your contribution! ❤️🔥
EDIT: possibly more info here: https://github.com/taikoxyz/taiko-mono/actions/runs/3669719093/jobs/6203750534 |
|
There was a problem with the window usage, resolved now |
this looks awesome, thank you again @wolfderechter ! two small comments:
|
|
Noted! Digesting it all, thanks for that!
…On Mon, Dec 12, 2022, 5:43 PM dave | d1onys1us ***@***.***> wrote:
***@***.**** commented on this pull request.
------------------------------
In packages/website/src/components/Hero/index.tsx
<#414 (comment)>:
> + // 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);
this is not using svelte fyi, it is using react. (we use svelte on our
Bridge UI, this is docusaurus + React). @WormydogDOTeth
<https://github.com/WormydogDOTeth>
—
Reply to this email directly, view it on GitHub
<#414 (comment)>,
or unsubscribe
<https://github.com/notifications/unsubscribe-auth/A4WB5KKNV463OESNNJHFXADWM6TBXANCNFSM6AAAAAAS3B2GZM>
.
You are receiving this because you were mentioned.Message ID:
***@***.***>
|
|
Congrats, your important contribution to this open-source project has earned you a GitPOAP! GitPOAP: 2022 Taiko Contributor: Head to gitpoap.io & connect your GitHub account to mint! Learn more about GitPOAPs here. |
|
hi @wolfderechter I noticed there is a gap / overflow on the right side, i'm only noticing this on mobile view. do you know what the fix for it is? screenshot
|
Oh snap, you're right. Just fixed it on #443, there was still an overflow to the right that I overlooked |
looks like there is a merge conflict @wolfderechter |
This is my take on issue #399. I also added an animation on the TaikoGeom image upon scroll, would love to hear thoughts on this but can always be removed. See the picture for how it looks on an Iphone 11 Pro.
