h3n3/cadhub
1
0
Fork 0
Code Issues 35 Pull Requests Packages Projects Releases Wiki Activity

Add parallax to floaty homepage cards #524

Merged
Irev-Dev merged 3 commits from kurt/parallax-to-floaty-cards into main 2021-09-23 10:16:41 +02:00
Conversation 9 Commits 3 Files Changed 6 +68 -22
Irev-Dev commented 2021-09-21 23:31:20 +02:00 (Migrated from github.com)
Copy Link

Sorry some formatting changes here to, but the crux of it is adding perspective to the homepage scroll body so that I could push the floaty cards closer to the user so they would move faster than the other elements when scrolling. Took me a while because I it was late that I realised I had to stop the div where the react component in injected from scrolling

https://user-images.githubusercontent.com/29681384/134250874-3e428ea1-5eb8-45e7-a51b-506da87b4427.mov

Sorry some formatting changes here to, but the crux of it is adding perspective to the homepage scroll body so that I could push the floaty cards closer to the user so they would move faster than the other elements when scrolling. Took me a while because I it was late that I realised I had to stop the div where the react component in injected from scrolling https://user-images.githubusercontent.com/29681384/134250874-3e428ea1-5eb8-45e7-a51b-506da87b4427.mov
Irev-Dev (Migrated from github.com) reviewed 2021-09-21 23:36:02 +02:00
app/web/src/index.html
@@ -15,3 +15,3 @@
<body>
<div id="redwood-app">
<div id="redwood-app" style="height: 100vh;">
<%= prerenderPlaceholder %>
Irev-Dev (Migrated from github.com) commented 2021-09-21 23:36:02 +02:00
Copy Link

Stoping this from being the scroll body

Stoping this from being the scroll body
Irev-Dev (Migrated from github.com) reviewed 2021-09-21 23:36:31 +02:00
app/web/src/layouts/MainLayout/MainLayout.js
Irev-Dev (Migrated from github.com) commented 2021-09-21 23:36:30 +02:00
Copy Link

This becomes the scroll body and we set perspective on it

This becomes the scroll body and we set perspective on it
Irev-Dev (Migrated from github.com) reviewed 2021-09-21 23:38:17 +02:00
app/web/src/components/Hero/Hero.tsx
@@ -172,0 +198,4 @@
{scadCode.map((line, index) => (
<div key={index}>
<span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">
{index + 1}
Irev-Dev (Migrated from github.com) commented 2021-09-21 23:38:17 +02:00
Copy Link

bringing the element forward 0.3px to get parallax and scaling down so it's still the same size. (0.3px is enough because the perspective is only 1px).

Few position tweaks too on x and y

bringing the element forward 0.3px to get parallax and scaling down so it's still the same size. (0.3px is enough because the perspective is only 1px). Few position tweaks too on x and y
Irev-Dev (Migrated from github.com) reviewed 2021-09-21 23:38:29 +02:00
app/web/src/components/Hero/Hero.tsx
Irev-Dev (Migrated from github.com) commented 2021-09-21 23:38:29 +02:00
Copy Link

Same as above

Same as above
franknoirot commented 2021-09-22 03:06:14 +02:00 (Migrated from github.com)
Copy Link

Just taking a closer look at this because I can't see it working in Firefox but I would expect it to still work, that 1px perspective trick usually does work cross-browser.

image

Just taking a closer look at this because I can't see it working in Firefox but I would expect it to still work, that 1px perspective trick usually does work cross-browser. ![image](https://user-images.githubusercontent.com/23481541/134267522-a43b1281-e2c5-479b-996a-5f95a701fc84.png)
franknoirot commented 2021-09-22 03:08:47 +02:00 (Migrated from github.com)
Copy Link

Getting just a bit of x-axis overflow on Chrome and FF:

image

Getting just a bit of x-axis overflow on Chrome and FF: ![image](https://user-images.githubusercontent.com/23481541/134267699-06ca6aa8-9f16-47bb-b40c-628cf313c45e.png)
Irev-Dev commented 2021-09-22 11:00:49 +02:00 (Migrated from github.com)
Copy Link

Thanks for pointing out the parallax issue in fx, as we discussed on discord was able fix with your tip of selecting all children and setting them to transform-style: preserve-3d a8d251ae92, would there be any benefit to using transform-style: inherit instead.

I also noticed as issue that the model reacting to the mouse had been broken by adding parallax I think because an element moved in front of the canvas. I was able to fix for safari and chrome by using pointer-events: none, but that didn't fix it for ff, and honestly I don't think it's worth labouring over.

@franknoirot I'm confused about the x-axis overflow. I can't replicate it. Does it happen at a certain screen size or is it always there? I've added overflow-x-hidden in e6c0199748 for safety but can't really test it 😑

Thanks for pointing out the parallax issue in fx, as we discussed on discord was able fix with your tip of selecting all children and setting them to `transform-style: preserve-3d` https://github.com/Irev-Dev/cadhub/pull/524/commits/a8d251ae9271bc8d152687bf5de54424294e1537, would there be any benefit to using `transform-style: inherit` instead. I also noticed as issue that the model reacting to the mouse had been broken by adding parallax I think because an element moved in front of the canvas. I was able to fix for safari and chrome by using `pointer-events: none`, but that didn't fix it for ff, and honestly I don't think it's worth labouring over. @franknoirot I'm confused about the x-axis overflow. I can't replicate it. Does it happen at a certain screen size or is it always there? I've added `overflow-x-hidden` in https://github.com/Irev-Dev/cadhub/pull/524/commits/e6c0199748509a5fa6604d9dc4a2629abfed9ef7 for safety but can't really test it 😑
franknoirot (Migrated from github.com) approved these changes 2021-09-23 03:42:20 +02:00
franknoirot (Migrated from github.com) left a comment
Copy Link

Nice @Irev-Dev! Confirmed fixed on FF, and not seeing any overflow-x.

Nice @Irev-Dev! Confirmed fixed on FF, and not seeing any `overflow-x`.
Irev-Dev commented 2021-09-23 11:15:19 +02:00 (Migrated from github.com)
Copy Link

Live now

Live now
Sign in to join this conversation.
Reviewers
No Reviewers
Irev-Dev
franknoirot
Labels
No items
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
h3n3
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: h3n3/cadhub#524
Delete Branch "kurt/parallax-to-floaty-cards"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?