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
6 changed files with 68 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
app/web/src/components/Hero/Hero.tsx
View File

@@ -13,7 +13,9 @@ import ProjectsCell from 'src/components/ProjectsCell'
import OutBound from 'src/components/OutBound/OutBound'
// dynamic import to enable pre-render iof the homepage
const AssetWithGooey = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
const AssetWithGooey = React.lazy(
() => import('src/components/Hero/AssetWithGooey')
)
const cqCode = `from cadquery import *
d1 = 58.5
@@ -79,36 +81,59 @@ export const Hero = () => {
return (
<div className="bg-ch-gray-800">
<div className="relative h-0 w-0">
<svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg
viewBox="0 0 100 100"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<clipPath id="code-blob-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.0038 0.0056)">
<path d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z" fill="#C4C4C4"/>
<clipPath
id="code-blob-clip-path"
clipPathUnits="objectBoundingBox"
transform="scale(0.0038 0.0056)"
>
<path
d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z"
fill="#C4C4C4"
/>
</clipPath>
</defs>
</svg>
</div>
<div className="grid lg:grid-cols-5 max-w-8xl mx-auto">
<div className="relative row-start-2 col-start-1 h-full lg:row-start-1 lg:col-span-3 lg:col-start-1">
<div className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
<div
className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden"
style={{ clipPath: 'url(#code-blob-clip-path)' }}
>
<pre className="lg:ml-20 mt-12 text-blue-100 font-fira-code">
{cqCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
{cqCode.map((line, index) => (
<div key={index}>
<span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">
{index + 1}
</span>
{line}
</div>
))}
</pre>
</div>
<ModelSection assetUrl="/coffee-lid.stl" scale={0.06} />
</div>
<div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0">
<div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0 pointer-events-none">
<Link
to={routes.project({
userName: 'irevdev',
projectTitle: 'coffee-lid',
})}
>
<div className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch">
<div
className="grid grid-flow-col gap-2 sm:gap-4 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md p-2 font-fira-sans relative z-10 shadow-ch pointer-events-auto"
style={{
transform: 'translate3d(3vw, -100px, 0.3px) scale(0.7)',
transformOrigin: 'top center',
}}
>
<div className="pl-1 sm:pl-4">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u"
@@ -165,12 +190,20 @@ export const Hero = () => {
<Community />
<div className="max-w-8xl mx-auto grid lg:grid-cols-5 py-16">
<div className=" row-start-2 col-start-1 lg:col-span-3 lg:col-start-3 lg:row-start-1 lg:-mx-10 h-full relative">
<div className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
<div
className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden"
style={{ clipPath: 'url(#code-blob-clip-path)' }}
>
<pre className="ml-10 mt-12 text-blue-100 text-xs font-fira-code">
{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}</span>{line}</div>)}
{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 commented 2021-09-21 23:38:17 +02:00 (Migrated from github.com)
Review
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
</span>
{line}
</div>
))}
</pre>
</div>
<ModelSection assetUrl="/hinge.stl" scale={0.12} />
</div>
@@ -193,14 +226,20 @@ export const Hero = () => {
</OutBound>
</div>
<div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10">
<div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10 pointer-events-none">
<Link
to={routes.project({
userName: 'irevdev',
projectTitle: 'tutorial-hinge',
})}
>
<div className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch">
<div
className="grid grid-flow-col sm:gap-2 items-center bg-ch-gray-760 bg-opacity-95 text-ch-gray-300 rounded-md py-2 pl-2 font-fira-sans relative z-10 shadow-ch pointer-events-auto"
style={{
transform: 'translate3d(-5vw, -100px, 0.3px) scale(0.7)',
transformOrigin: 'top center',
}}
>
<div className="pl-1 sm:pl-4">
<Gravatar
image="CadHub/xvrnxvarkv8tdzo4n65u"

2
app/web/src/index.html
View File

@@ -13,7 +13,7 @@
<meta property="og:locale" content="en-US" />
</head>
<body>
<div id="redwood-app">
<div id="redwood-app" style="height: 100vh;">
<%= prerenderPlaceholder %>
Irev-Dev commented 2021-09-21 23:36:02 +02:00 (Migrated from github.com)
Review
Copy Link

Stoping this from being the scroll body

Stoping this from being the scroll body
</div>
</body>

BIN
app/web/src/layouts/MainLayout/Logo_2.jpg
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.4 KiB

3
app/web/src/layouts/MainLayout/MainLayout.css Normal file
View File

@@ -0,0 +1,3 @@
.preserve-3d-for-children * {
transform-style: preserve-3d;
}

6
app/web/src/layouts/MainLayout/MainLayout.js
View File

@@ -15,6 +15,7 @@ import { isBrowser } from '@redwoodjs/prerender/browserUtils'
import Svg from 'src/components/Svg'
import { ImageFallback } from 'src/components/ImageUploader'
import useUser from 'src/helpers/hooks/useUser'
import './MainLayout.css'
let previousSubmission = ''
@@ -69,7 +70,10 @@ const MainLayout = ({ children, shouldRemoveFooterInIde }) => {
}
}, [hash, client])
return (
<div className="min-h-screen flex flex-col ch-scrollbar">
<div
className="h-full flex flex-col ch-scrollbar overflow-y-scroll preserve-3d-for-children overflow-x-hidden"
style={{ perspective: '1px', perspectiveOrigin: 'top center' }}
>
<header id="cadhub-main-header">
<nav className="flex justify-between h-16 sm:px-4 bg-ch-gray-900">
<ul className="flex items-center">

4
app/web/src/pages/HomePage/HomePage.tsx
View File

@@ -2,7 +2,7 @@ import MainLayout from 'src/layouts/MainLayout'
import Seo from 'src/components/Seo/Seo'
import { Hero } from 'src/components/Hero/Hero'
const ProjectsPage = () => {
const HomePage = () => {
return (
<MainLayout shouldRemoveFooterInIde>
<Seo
@@ -16,4 +16,4 @@ const ProjectsPage = () => {
)
}
export default ProjectsPage
export default HomePage