Skip to content

Commit

Permalink
added parallax to homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
Stephen-Gordon committed Mar 16, 2024
1 parent ef376c8 commit 724d456
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 163 deletions.
6 changes: 4 additions & 2 deletions src/app/components/activity/Activity.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
300 changes: 149 additions & 151 deletions src/app/components/ui/background-gradient-animation.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLDivElement>(null);
const interactiveRef = useRef<HTMLDivElement>(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<HTMLDivElement>) => {
if (interactiveRef.current) {
const rect = interactiveRef.current.getBoundingClientRect();
setTgX(event.clientX - rect.left);
setTgY(event.clientY - rect.top);
}
};
const handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {
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 (
<div
className={cn(
'bg-background relative left-0 top-0 h-screen w-screen overflow-hidden opacity-30',
containerClassName
)}
>
<svg className='hidden'>
<defs>
<filter id='blurMe'>
<feGaussianBlur
in='SourceGraphic'
stdDeviation='10'
result='blur'
/>
<feColorMatrix
in='blur'
mode='matrix'
values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8'
result='goo'
/>
<feBlend in='SourceGraphic' in2='goo' />
</filter>
</defs>
</svg>
<div className={cn('', className)}>{children}</div>
<motion.div
style={{ y, scale, opacity }}
className={cn(
'gradients-container h-full w-full blur-lg',
isSafari ? 'blur-2xl' : '[filter:url(#blurMe)_blur(100px)]'
)}
>
<div
className={cn(
"h-screen w-screen relative overflow-hidden top-0 left-0 bg-background opacity-30",
containerClassName
)}
>
<svg className="hidden">
<defs>
<filter id="blurMe">
<feGaussianBlur
in="SourceGraphic"
stdDeviation="10"
result="blur"
/>
<feColorMatrix
in="blur"
mode="matrix"
values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8"
result="goo"
/>
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
<div className={cn("", className)}>{children}</div>
<motion.div
style={{ y, scale, opacity, }}
className={cn(
"gradients-container h-full w-full blur-lg",
isSafari ? "blur-2xl" : "[filter:url(#blurMe)_blur(40px)]"
)}
>
<div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_var(--first-color)_0,_var(--first-color)_50%)_no-repeat]`,
`[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
`[transform-origin:center_center]`,
`animate-first`,
`opacity-100`
)}
></div>
<div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--second-color),_0.8)_0,_rgba(var(--second-color),_0)_50%)_no-repeat]`,
`[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
`[transform-origin:calc(50%-400px)]`,
`animate-second`,
`opacity-100`
)}
></div>
<div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--third-color),_0.8)_0,_rgba(var(--third-color),_0)_50%)_no-repeat]`,
`[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
`[transform-origin:calc(50%+400px)]`,
`animate-third`,
`opacity-100`
)}
></div>
{/* <div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_var(--first-color)_0,_var(--first-color)_50%)_no-repeat]`,
`left-[calc(50%-var(--size)/2)] top-[calc(50%-var(--size)/2)] h-[var(--size)] w-[var(--size)] [mix-blend-mode:var(--blending-value)]`,
`[transform-origin:center_center]`,
`animate-first`,
`opacity-100`
)}
></div>
<div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--second-color),_0.8)_0,_rgba(var(--second-color),_0)_50%)_no-repeat]`,
`left-[calc(50%-var(--size)/2)] top-[calc(50%-var(--size)/2)] h-[var(--size)] w-[var(--size)] [mix-blend-mode:var(--blending-value)]`,
`[transform-origin:calc(50%-400px)]`,
`animate-second`,
`opacity-100`
)}
></div>
<div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--third-color),_0.8)_0,_rgba(var(--third-color),_0)_50%)_no-repeat]`,
`left-[calc(50%-var(--size)/2)] top-[calc(50%-var(--size)/2)] h-[var(--size)] w-[var(--size)] [mix-blend-mode:var(--blending-value)]`,
`[transform-origin:calc(50%-200px)]`,
`animate-third`,
`opacity-100`
)}
></div>
{/* <div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--fourth-color),_0.8)_0,_rgba(var(--fourth-color),_0)_50%)_no-repeat]`,
`[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
Expand All @@ -165,7 +163,7 @@ export const BackgroundGradientAnimation = ({
`opacity-70`
)}
></div> */}
{/* <div
{/* <div
className={cn(
`absolute [background:radial-gradient(circle_at_center,_rgba(var(--fifth-color),_0.8)_0,_rgba(var(--fifth-color),_0)_50%)_no-repeat]`,
`[mix-blend-mode:var(--blending-value)] w-[var(--size)] h-[var(--size)] top-[calc(50%-var(--size)/2)] left-[calc(50%-var(--size)/2)]`,
Expand All @@ -174,7 +172,7 @@ export const BackgroundGradientAnimation = ({
`opacity-100`
)}
></div> */}
{/*
{/*
{interactive && (
<div
ref={interactiveRef}
Expand All @@ -186,7 +184,7 @@ export const BackgroundGradientAnimation = ({
)}
></div>
)} */}
</motion.div>
</div>
);
</motion.div>
</div>
);
};
Loading

0 comments on commit 724d456

Please sign in to comment.