79 lines
4.1 KiB
TypeScript
79 lines
4.1 KiB
TypeScript
"use client";
|
|
import { useEffect, useState } from 'react';
|
|
import React from 'react';
|
|
import { Line } from '@/components/profile/svgs';
|
|
import { LinesConfig } from '@/types/waves';
|
|
|
|
const lines: LinesConfig[] = [
|
|
{ id: 1, width: 100, height: 100, left: '5%', initialTop: 300, scrollFactor: 0.8 },
|
|
{ id: 2, width: 120, height: 120, left: '15%', initialTop: 350, scrollFactor: 0.6 },
|
|
{ id: 3, width: 80, height: 80, left: '25%', initialTop: 400, scrollFactor: 0.4, bottom: true },
|
|
{ id: 4, width: 70, height: 70, left: '35%', initialTop: 450, scrollFactor: 0.7, bottom: true },
|
|
{ id: 5, width: 120, height: 120, left: '45%', initialTop: 500, scrollFactor: 0.5, bottom: true, flipped: true },
|
|
{ id: 6, width: 50, height: 50, left: '55%', initialTop: 550, scrollFactor: 0.2, bottom: true, flipped: true },
|
|
{ id: 7, width: 70, height: 70, left: '65%', initialTop: 600, scrollFactor: 0.4, bottom: true },
|
|
{ id: 8, width: 90, height: 90, left: '75%', initialTop: 650, scrollFactor: 0.6 },
|
|
{ id: 9, width: 100, height: 100, left: '35%', initialTop: 700, scrollFactor: 0.8 },
|
|
{ id: 10, width: 120, height: 120, left: '65%', initialTop: 750, scrollFactor: 0.6 },
|
|
{ id: 11, width: 80, height: 80, left: '10%', initialTop: 800, scrollFactor: 0.4 },
|
|
{ id: 12, width: 130, height: 130, left: '20%', initialTop: 850, scrollFactor: 0.5 },
|
|
{ id: 13, width: 110, height: 110, left: '30%', initialTop: 900, scrollFactor: 0.7, flipped: true },
|
|
{ id: 14, width: 70, height: 70, left: '40%', initialTop: 300, scrollFactor: 0.7 },
|
|
{ id: 15, width: 120, height: 120, left: '50%', initialTop: 350, scrollFactor: 0.5, flipped: true },
|
|
{ id: 16, width: 50, height: 50, left: '60%', initialTop: 400, scrollFactor: 0.2 },
|
|
{ id: 17, width: 70, height: 70, left: '70%', initialTop: 450, scrollFactor: 0.4 },
|
|
{ id: 18, width: 90, height: 90, left: '73%', initialTop: 500, scrollFactor: 0.6 },
|
|
{ id: 19, width: 100, height: 100, left: '68%', initialTop: 550, scrollFactor: 0.8 },
|
|
{ id: 20, width: 120, height: 120, left: '5%', initialTop: 600, scrollFactor: 0.6 },
|
|
{ id: 21, width: 80, height: 80, left: '15%', initialTop: 650, scrollFactor: 0.4 },
|
|
{ id: 22, width: 70, height: 70, left: '25%', initialTop: 700, scrollFactor: 0.7 },
|
|
{ id: 23, width: 120, height: 120, left: '35%', initialTop: 750, scrollFactor: 0.5, flipped: true },
|
|
{ id: 24, width: 50, height: 50, left: '45%', initialTop: 800, scrollFactor: 0.2, flipped: true },
|
|
{ id: 25, width: 70, height: 70, left: '55%', initialTop: 850, scrollFactor: 0.4 },
|
|
{ id: 26, width: 90, height: 90, left: '65%', initialTop: 900, scrollFactor: 0.6 },
|
|
{ id: 27, width: 100, height: 100, left: '70%', initialTop: 300, scrollFactor: 0.8 },
|
|
];
|
|
|
|
export default function Speed() {
|
|
const [scrolled, setScrolled] = useState<number>(0);
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => {
|
|
setScrolled(window.scrollY);
|
|
};
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
window.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const calculateRockPosition = (config: typeof lines[number]) => {
|
|
const basePosition = config.bottom
|
|
? `calc(100% - ${config.initialTop}%)`
|
|
: `${config.initialTop}%`;
|
|
|
|
return {
|
|
position: 'absolute',
|
|
left: config.left,
|
|
top: `calc(${basePosition} - ${scrolled * config.scrollFactor}px)`,
|
|
width: `${config.width}px`,
|
|
height: `${config.height}px`,
|
|
transform: config.flipped ? 'scaleX(-1)' : 'none',
|
|
};
|
|
};
|
|
|
|
return (
|
|
<section>
|
|
<div className='h-[20vh] relative flex justify-center items-center'>
|
|
<div className="relative w-full h-full">
|
|
{lines.map((config) => {
|
|
return (
|
|
<Line key={config.id} className="fill-slate-400" width={config.width} height={config.height} style={calculateRockPosition(config) as React.CSSProperties}/>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
} |