From 724d4567c778b128c39774b3788219f459ebd2b5 Mon Sep 17 00:00:00 2001 From: Ste Date: Sat, 16 Mar 2024 11:40:14 +0000 Subject: [PATCH] added parallax to homepage --- src/app/components/activity/Activity.tsx | 6 +- .../ui/background-gradient-animation.tsx | 300 +++++++++--------- src/app/home/page.tsx | 23 +- tailwind.config.ts | 10 +- 4 files changed, 176 insertions(+), 163 deletions(-) diff --git a/src/app/components/activity/Activity.tsx b/src/app/components/activity/Activity.tsx index e46fb01..5a085d2 100644 --- a/src/app/components/activity/Activity.tsx +++ b/src/app/components/activity/Activity.tsx @@ -9,12 +9,14 @@ import { useDispatch, useSelector } from 'react-redux'; import { setTransactions } from '@/GlobalRedux/Features/transactions/transactionsSlice'; import { motion } from 'framer-motion'; -import { Card, +import { + Card, CardContent, CardDescription, CardFooter, CardHeader, - CardTitle, } from '@/app/components/ui/card'; + CardTitle, +} from '@/app/components/ui/card'; import { Button } from '../ui/button'; export default function Activity() { diff --git a/src/app/components/ui/background-gradient-animation.tsx b/src/app/components/ui/background-gradient-animation.tsx index be9380f..9df2557 100644 --- a/src/app/components/ui/background-gradient-animation.tsx +++ b/src/app/components/ui/background-gradient-animation.tsx @@ -1,162 +1,160 @@ -"use client"; -import { cn } from "@/lib/utils"; -import { useEffect, useRef, useState } from "react"; -import { useInView, motion, useScroll, useTransform } from "framer-motion" +'use client'; +import { cn } from '@/lib/utils'; +import { useEffect, useRef, useState } from 'react'; +import { useInView, motion, useScroll, useTransform } from 'framer-motion'; export const BackgroundGradientAnimation = ({ - gradientBackgroundStart = "rgb(108, 0, 162)", - gradientBackgroundEnd = "rgb(0, 17, 82)", - firstColor = "18, 113, 255", - secondColor = "221, 74, 255", - thirdColor = "100, 220, 255", - fourthColor = "200, 50, 50", - fifthColor = "180, 180, 50", - pointerColor = "140, 100, 255", - size = "80%", - blendingValue = "hard-light", - children, - className, - interactive = true, - containerClassName, + gradientBackgroundStart = 'rgb(108, 0, 162)', + gradientBackgroundEnd = 'rgb(0, 17, 82)', + firstColor = '228, 83, 104', + secondColor = '9, 69, 223', + thirdColor = '223, 9, 9', + fourthColor = '200, 50, 50', + fifthColor = '180, 180, 50', + pointerColor = '140, 100, 255', + size = '80%', + blendingValue = 'hard-light', + children, + className, + interactive = true, + containerClassName, }: { - gradientBackgroundStart?: string; - gradientBackgroundEnd?: string; - firstColor?: string; - secondColor?: string; - thirdColor?: string; - fourthColor?: string; - fifthColor?: string; - pointerColor?: string; - size?: string; - blendingValue?: string; - children?: React.ReactNode; - className?: string; - interactive?: boolean; - containerClassName?: string; + gradientBackgroundStart?: string; + gradientBackgroundEnd?: string; + firstColor?: string; + secondColor?: string; + thirdColor?: string; + fourthColor?: string; + fifthColor?: string; + pointerColor?: string; + size?: string; + blendingValue?: string; + children?: React.ReactNode; + className?: string; + interactive?: boolean; + containerClassName?: string; }) => { - const interactiveRef = useRef(null); + const interactiveRef = useRef(null); - const [curX, setCurX] = useState(0); - const [curY, setCurY] = useState(0); - const [tgX, setTgX] = useState(0); - const [tgY, setTgY] = useState(0); + const [curX, setCurX] = useState(0); + const [curY, setCurY] = useState(0); + const [tgX, setTgX] = useState(0); + const [tgY, setTgY] = useState(0); + let { scrollYProgress } = useScroll(); + let y = useTransform(scrollYProgress, [0, 1], ['0', '-50%']); + let opacity = useTransform(scrollYProgress, [0, 0.7], [0.7, 0]); + let scale = useTransform(scrollYProgress, [0, 1], ['100%', '20%']); + let scale2 = useTransform(scrollYProgress, [0, 1], ['100%', '60%']); - let { scrollYProgress } = useScroll(); - let y = useTransform(scrollYProgress, [0, 1], ["0", "-50%"]); - let opacity = useTransform(scrollYProgress, [0, 0.7], [0.7, 0]); - let scale = useTransform(scrollYProgress, [0, 1], ["100%", "20%"]); - let scale2 = useTransform(scrollYProgress, [0, 1], ["100%", "60%"]); - - - useEffect(() => { - document.body.style.setProperty( - "--gradient-background-start", - gradientBackgroundStart - ); - document.body.style.setProperty( - "--gradient-background-end", - gradientBackgroundEnd - ); - document.body.style.setProperty("--first-color", firstColor); - document.body.style.setProperty("--second-color", secondColor); - document.body.style.setProperty("--third-color", thirdColor); - document.body.style.setProperty("--fourth-color", fourthColor); - document.body.style.setProperty("--fifth-color", fifthColor); - document.body.style.setProperty("--pointer-color", pointerColor); - document.body.style.setProperty("--size", size); - document.body.style.setProperty("--blending-value", blendingValue); - }, []); + useEffect(() => { + document.body.style.setProperty( + '--gradient-background-start', + gradientBackgroundStart + ); + document.body.style.setProperty( + '--gradient-background-end', + gradientBackgroundEnd + ); + document.body.style.setProperty('--first-color', firstColor); + document.body.style.setProperty('--second-color', secondColor); + document.body.style.setProperty('--third-color', thirdColor); + document.body.style.setProperty('--fourth-color', fourthColor); + document.body.style.setProperty('--fifth-color', fifthColor); + document.body.style.setProperty('--pointer-color', pointerColor); + document.body.style.setProperty('--size', size); + document.body.style.setProperty('--blending-value', blendingValue); + }, []); - useEffect(() => { - function move() { - if (!interactiveRef.current) { - return; - } - setCurX(curX + (tgX - curX) / 20); - setCurY(curY + (tgY - curY) / 20); - interactiveRef.current.style.transform = `translate(${Math.round( - curX - )}px, ${Math.round(curY)}px)`; - } + useEffect(() => { + function move() { + if (!interactiveRef.current) { + return; + } + setCurX(curX + (tgX - curX) / 20); + setCurY(curY + (tgY - curY) / 20); + interactiveRef.current.style.transform = `translate(${Math.round( + curX + )}px, ${Math.round(curY)}px)`; + } - move(); - }, [tgX, tgY]); + move(); + }, [tgX, tgY]); - const handleMouseMove = (event: React.MouseEvent) => { - if (interactiveRef.current) { - const rect = interactiveRef.current.getBoundingClientRect(); - setTgX(event.clientX - rect.left); - setTgY(event.clientY - rect.top); - } - }; + const handleMouseMove = (event: React.MouseEvent) => { + if (interactiveRef.current) { + const rect = interactiveRef.current.getBoundingClientRect(); + setTgX(event.clientX - rect.left); + setTgY(event.clientY - rect.top); + } + }; - const [isSafari, setIsSafari] = useState(false); - useEffect(() => { - setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); - }, []); + const [isSafari, setIsSafari] = useState(false); + useEffect(() => { + setIsSafari(/^((?!chrome|android).)*safari/i.test(navigator.userAgent)); + }, []); - return ( + return ( +
+ + + + + + + + + +
{children}
+
- - - - - - - - - -
{children}
- -
-
-
- {/*
+
+
+ {/*
*/} - {/*
*/} - {/* + {/* {interactive && (
)} */} - -
- ); + +
+ ); }; diff --git a/src/app/home/page.tsx b/src/app/home/page.tsx index b317089..1476866 100644 --- a/src/app/home/page.tsx +++ b/src/app/home/page.tsx @@ -31,6 +31,8 @@ import { Menu } from 'lucide-react'; import { BackgroundGradientAnimation } from '../components/ui/background-gradient-animation'; import useGetAddress from '../hooks/useGetAddress'; +import { useInView, motion, useScroll, useTransform } from 'framer-motion'; + export default function Page() { // privy const { user, zeroDevReady, sendTransaction } = usePrivySmartAccount(); @@ -38,6 +40,11 @@ export default function Page() { // next const router = useRouter(); + let { scrollYProgress } = useScroll(); + let y = useTransform(scrollYProgress, [0, 1], ['0', '-10%']); + let opacity = useTransform(scrollYProgress, [0, 1], [1, 0]); + let scale = useTransform(scrollYProgress, [0, 1], ['100%', '80%']); + useEffect(() => { console.log('hi'); console.log('user', user); @@ -69,12 +76,18 @@ export default function Page() {
-
+ {/* {address} */} -
+ -
+
{ @@ -120,8 +133,8 @@ export default function Page() {
-
-
+ +
{/*
diff --git a/tailwind.config.ts b/tailwind.config.ts index ee8b3ab..4bc6397 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -82,11 +82,11 @@ const config = { animation: { 'accordion-down': 'accordion-down 0.2s ease-out', 'accordion-up': 'accordion-up 0.2s ease-out', - first: "moveVertical 30s ease infinite", - second: "moveInCircle 20s reverse infinite", - third: "moveInCircle 40s linear infinite", - fourth: "moveHorizontal 40s ease infinite", - fifth: "moveInCircle 20s ease infinite", + first: "moveVertical 150s ease infinite", + second: "moveInCircle 180s reverse infinite", + third: "moveInCircle 200s linear infinite", + fourth: "moveHorizontal 150s ease infinite", + fifth: "moveInCircle 150s ease infinite", }, keyframes: { 'accordion-down': {