35 lines
1.4 KiB
TypeScript
35 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function ParallaxHero() {
|
|
const [y, setY] = useState(0);
|
|
useEffect(() => {
|
|
const onScroll = () => setY(window.scrollY);
|
|
window.addEventListener("scroll", onScroll, { passive: true });
|
|
return () => window.removeEventListener("scroll", onScroll);
|
|
}, []);
|
|
|
|
const maxH = 420;
|
|
const minH = 140;
|
|
const delta = Math.max(0, Math.min(maxH - minH, y));
|
|
const height = maxH - delta;
|
|
const overlayOpacity = 0.25 + delta / (maxH - minH) * 0.15;
|
|
const titleScale = 1 - delta / (maxH - minH) * 0.2;
|
|
|
|
return (
|
|
<div className="relative" style={{ height: maxH }}>
|
|
<div className="sticky top-0 z-40">
|
|
<div className="relative w-full" style={{ height }}>
|
|
<Image src="/placeholder.svg" alt="投资者关系" fill className="object-cover" priority />
|
|
<div className="absolute inset-0" style={{ backgroundColor: `rgba(0,0,0,${overlayOpacity})` }} />
|
|
<div className="absolute left-6 md:left-12 bottom-6 md:bottom-10 text-white" style={{ transform: `scale(${titleScale})`, transformOrigin: "left bottom" }}>
|
|
<div className="text-2xl md:text-4xl font-semibold">投资者关系</div>
|
|
<div className="text-lg md:text-2xl mt-1 opacity-90">Investor</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |