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

Add parallax to floaty homepage cards (#524)

Browse Source 
* Add parallax to floaty homepage cards

* Add firefox fix and restore model mouse tracking

* Add overflow-x hidden for safety
This commit was merged in pull request #524.
This commit is contained in:
Kurt Hutten
2021-09-23 18:16:41 +10:00
committed by GitHub
parent 64624b9c3e
commit 18732e27fc
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}
</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 %>
</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