144 lines
3.8 KiB
TypeScript
144 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import React, { useEffect, useRef, useState } from "react"
|
|
|
|
export default function LadderClimb() {
|
|
const charRef = useRef<HTMLDivElement>(null)
|
|
const ladderRef = useRef<HTMLDivElement>(null)
|
|
|
|
const [animation, setAnimation] = useState<"idle" | "climbing">("idle")
|
|
const [visible, setVisible] = useState(true)
|
|
|
|
const ladderHeight = useRef(0)
|
|
const scrollTimeout = useRef<any>(null)
|
|
|
|
const updateDimensions = () => {
|
|
if (ladderRef.current) {
|
|
ladderHeight.current = ladderRef.current.clientHeight
|
|
}
|
|
if (charRef.current) {
|
|
charRef.current.style.transform = `translateY(0px)`
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
updateDimensions()
|
|
setAnimation("idle")
|
|
|
|
window.addEventListener("resize", updateDimensions)
|
|
|
|
const handleScroll = () => {
|
|
if (!charRef.current || !ladderRef.current) return
|
|
|
|
// show ladder & climbing animation
|
|
setVisible(true)
|
|
setAnimation("climbing")
|
|
|
|
const scrollTop = window.scrollY
|
|
const docHeight = document.body.scrollHeight
|
|
const viewportHeight = window.innerHeight
|
|
|
|
let progress = scrollTop / (docHeight - viewportHeight)
|
|
progress = Math.max(0, Math.min(1, progress))
|
|
|
|
const topOffset = 174
|
|
const bottomOffset = 30
|
|
const maxClimb = ladderHeight.current - topOffset - bottomOffset
|
|
|
|
const y = progress * maxClimb
|
|
charRef.current.style.transform = `translateY(-${y}px)`
|
|
|
|
// hide smoothly after scroll stops
|
|
if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
|
|
scrollTimeout.current = setTimeout(() => {
|
|
setAnimation("idle")
|
|
setVisible(false)
|
|
}, 500)
|
|
}
|
|
|
|
window.addEventListener("scroll", handleScroll)
|
|
|
|
return () => {
|
|
window.removeEventListener("scroll", handleScroll)
|
|
window.removeEventListener("resize", updateDimensions)
|
|
if (scrollTimeout.current) clearTimeout(scrollTimeout.current)
|
|
}
|
|
}, [])
|
|
|
|
return (
|
|
<>
|
|
{/* Ladder container */}
|
|
<div
|
|
ref={ladderRef}
|
|
style={{
|
|
position: "fixed",
|
|
right: 0,
|
|
top: 80,
|
|
height: "100vh",
|
|
width: "100px",
|
|
display: "flex",
|
|
justifyContent: "center",
|
|
alignItems: "flex-end",
|
|
zIndex: 999,
|
|
|
|
// smooth hide / show
|
|
opacity: visible ? 1 : 0,
|
|
transform: visible ? "translateX(0)" : "translateX(40px)",
|
|
pointerEvents: visible ? "auto" : "none",
|
|
transition: "opacity 0.8s ease, transform 0.8s ease"
|
|
}}
|
|
>
|
|
{/* Ladder background */}
|
|
<div
|
|
style={{
|
|
height: "100%",
|
|
width: "40px",
|
|
background:
|
|
"repeating-linear-gradient(to bottom, #666 0, #666 8px, transparent 8px, transparent 30px)",
|
|
borderLeft: "8px solid #666",
|
|
borderRight: "8px solid #666",
|
|
zIndex: 1
|
|
}}
|
|
/>
|
|
|
|
{/* Character */}
|
|
<div
|
|
ref={charRef}
|
|
style={{
|
|
position: "absolute",
|
|
bottom: 45,
|
|
left: "50%",
|
|
marginLeft: "-100px",
|
|
width: "200px",
|
|
zIndex: 10,
|
|
willChange: "transform",
|
|
transition: "transform 0.15s linear"
|
|
}}
|
|
>
|
|
{/* CLIMBING */}
|
|
{animation === "climbing" && (
|
|
<img
|
|
src="./climber21.png"
|
|
alt="Climbing"
|
|
style={{ width: "400px", height: "200px" }}
|
|
/>
|
|
)}
|
|
|
|
{/* IDLE */}
|
|
{animation === "idle" && (
|
|
<img
|
|
src="./Idle3.png"
|
|
alt="Idle"
|
|
style={{
|
|
marginLeft: "10px",
|
|
width: "400px",
|
|
height: "200px"
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|