feat: scroll progress bar + tagline text on hero
This commit is contained in:
@@ -2,6 +2,13 @@
|
||||
|
||||
import { useEffect, useRef, useState } from 'react'
|
||||
import { useTranslations } from 'next-intl'
|
||||
import {
|
||||
motion,
|
||||
useScroll,
|
||||
useTransform,
|
||||
useMotionValueEvent,
|
||||
useReducedMotion,
|
||||
} from 'framer-motion'
|
||||
|
||||
const TOTAL_FRAMES = 298
|
||||
const FRAME_PATH = (n: number) =>
|
||||
@@ -9,36 +16,52 @@ const FRAME_PATH = (n: number) =>
|
||||
|
||||
export default function CloudRevealSection() {
|
||||
const t = useTranslations('hero')
|
||||
const prefersReducedMotion = useReducedMotion()
|
||||
const sectionRef = useRef<HTMLDivElement>(null)
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const textRef = useRef<HTMLDivElement>(null)
|
||||
const framesRef = useRef<HTMLImageElement[]>([])
|
||||
const currentFrameRef = useRef(0)
|
||||
const rafRef = useRef<number | null>(null)
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
const [loadProgress, setLoadProgress] = useState(0)
|
||||
|
||||
// Frame'leri sıralı preload et
|
||||
const { scrollYProgress } = useScroll({
|
||||
target: sectionRef,
|
||||
offset: ['start start', 'end end'],
|
||||
})
|
||||
|
||||
// Tagline: ilk %15'te solar, aşağı kayar
|
||||
const taglineOpacity = useTransform(scrollYProgress, [0, 0.15], [1, 0])
|
||||
const taglineY = useTransform(scrollYProgress, [0, 0.15], [0, 40])
|
||||
|
||||
// Progress bar: scroll'a göre genişler (0 → 100%)
|
||||
const progressScaleX = useTransform(scrollYProgress, [0, 1], [0, 1])
|
||||
|
||||
// Frame preload
|
||||
useEffect(() => {
|
||||
if (prefersReducedMotion) return
|
||||
|
||||
const images: HTMLImageElement[] = new Array(TOTAL_FRAMES)
|
||||
let loadedCount = 0
|
||||
let cancelled = false
|
||||
|
||||
for (let i = 0; i < TOTAL_FRAMES; i++) {
|
||||
const img = new Image()
|
||||
img.src = FRAME_PATH(i + 1)
|
||||
img.onload = () => {
|
||||
if (cancelled) return
|
||||
loadedCount++
|
||||
setLoadProgress(Math.round((loadedCount / TOTAL_FRAMES) * 100))
|
||||
if (loadedCount === TOTAL_FRAMES) {
|
||||
framesRef.current = images
|
||||
setLoaded(true)
|
||||
// İlk frame'i hemen çiz
|
||||
drawFrame(0, images)
|
||||
}
|
||||
}
|
||||
images[i] = img
|
||||
}
|
||||
}, [])
|
||||
|
||||
return () => { cancelled = true }
|
||||
}, [prefersReducedMotion])
|
||||
|
||||
function drawFrame(index: number, images?: HTMLImageElement[]) {
|
||||
const canvas = canvasRef.current
|
||||
@@ -51,61 +74,24 @@ export default function CloudRevealSection() {
|
||||
ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
|
||||
}
|
||||
|
||||
// Scroll handler
|
||||
useEffect(() => {
|
||||
useMotionValueEvent(scrollYProgress, 'change', (progress) => {
|
||||
if (!loaded) return
|
||||
|
||||
const section = sectionRef.current
|
||||
const text = textRef.current
|
||||
if (!section || !text) return
|
||||
|
||||
const handleScroll = () => {
|
||||
const rect = section.getBoundingClientRect()
|
||||
const sectionHeight = section.offsetHeight
|
||||
const windowH = window.innerHeight
|
||||
|
||||
const scrolled = -rect.top
|
||||
const total = sectionHeight - windowH
|
||||
const progress = Math.min(Math.max(scrolled / total, 0), 1)
|
||||
|
||||
// Hangi frame'i göstereceğimizi hesapla
|
||||
const frameIndex = Math.min(
|
||||
Math.floor(progress * (TOTAL_FRAMES - 1)),
|
||||
TOTAL_FRAMES - 1
|
||||
)
|
||||
|
||||
// Sadece frame değiştiyse çiz (RAF ile)
|
||||
if (frameIndex !== currentFrameRef.current) {
|
||||
currentFrameRef.current = frameIndex
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current)
|
||||
rafRef.current = requestAnimationFrame(() => drawFrame(frameIndex))
|
||||
}
|
||||
|
||||
// Tagline: ilk %15'te görünür, sonra solar
|
||||
if (progress < 0.15) {
|
||||
const opacity = 1 - progress / 0.15
|
||||
text.style.opacity = String(opacity)
|
||||
text.style.transform = `translateY(${progress * 40}px)`
|
||||
} else {
|
||||
text.style.opacity = '0'
|
||||
}
|
||||
const frameIndex = Math.min(
|
||||
Math.floor(progress * (TOTAL_FRAMES - 1)),
|
||||
TOTAL_FRAMES - 1
|
||||
)
|
||||
if (frameIndex !== currentFrameRef.current) {
|
||||
currentFrameRef.current = frameIndex
|
||||
drawFrame(frameIndex)
|
||||
}
|
||||
})
|
||||
|
||||
window.addEventListener('scroll', handleScroll, { passive: true })
|
||||
return () => {
|
||||
window.removeEventListener('scroll', handleScroll)
|
||||
if (rafRef.current) cancelAnimationFrame(rafRef.current)
|
||||
}
|
||||
}, [loaded])
|
||||
|
||||
// Canvas boyutunu ekrana sığdır
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
const resize = () => {
|
||||
canvas.width = window.innerWidth
|
||||
canvas.height = window.innerHeight
|
||||
// Resize sonrası mevcut frame'i yeniden çiz
|
||||
drawFrame(currentFrameRef.current)
|
||||
}
|
||||
resize()
|
||||
@@ -113,18 +99,39 @@ export default function CloudRevealSection() {
|
||||
return () => window.removeEventListener('resize', resize)
|
||||
}, [loaded])
|
||||
|
||||
if (prefersReducedMotion) {
|
||||
return (
|
||||
<div className="relative min-h-[100dvh] w-full overflow-hidden bg-black flex items-end">
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black via-black/60 to-transparent" />
|
||||
<div className="relative z-10 w-full px-10 pb-24">
|
||||
<p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
|
||||
Vesta Muğla
|
||||
</p>
|
||||
<h1 className="text-white text-5xl md:text-7xl font-serif font-light leading-tight">
|
||||
{t('tagline')}
|
||||
</h1>
|
||||
<p className="text-white/50 mt-4 text-base md:text-lg font-light max-w-md">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref={sectionRef} style={{ height: '500vh' }}>
|
||||
<div className="sticky top-0 h-screen w-full overflow-hidden bg-black">
|
||||
<div className="sticky top-0 min-h-[100dvh] w-full overflow-hidden bg-black">
|
||||
|
||||
{/* Canvas — frame'ler buraya çizilir */}
|
||||
{/* Canvas */}
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="absolute inset-0 w-full h-full"
|
||||
style={{ objectFit: 'cover' }}
|
||||
/>
|
||||
|
||||
{/* Loading ekranı */}
|
||||
{/* Gradient — alt kısım okunabilir olsun */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/70 via-transparent to-transparent pointer-events-none" />
|
||||
|
||||
{/* Loading */}
|
||||
{!loaded && (
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center bg-black z-20">
|
||||
<div className="w-48 h-px bg-white/10 mb-3">
|
||||
@@ -139,32 +146,42 @@ export default function CloudRevealSection() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Tagline */}
|
||||
<div
|
||||
ref={textRef}
|
||||
className="absolute bottom-16 left-0 right-0 z-10 text-center px-6"
|
||||
style={{ willChange: 'opacity, transform', transition: 'none' }}
|
||||
{/* Sol alt — tagline metni */}
|
||||
<motion.div
|
||||
style={{ opacity: taglineOpacity, y: taglineY }}
|
||||
className="absolute bottom-20 left-0 z-10 px-10 max-w-xl"
|
||||
>
|
||||
<p className="text-white/60 text-xs tracking-[0.4em] uppercase mb-3">
|
||||
<p className="text-white/50 text-xs tracking-[0.4em] uppercase mb-4">
|
||||
Vesta Muğla
|
||||
</p>
|
||||
<h1 className="text-white text-4xl md:text-6xl font-serif font-light leading-tight drop-shadow-2xl">
|
||||
{t('tagline')}
|
||||
</h1>
|
||||
<p className="text-white/50 mt-4 text-base md:text-lg font-light">
|
||||
<p className="text-white/50 mt-3 text-sm md:text-base font-light">
|
||||
{t('subtitle')}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Scroll indicator */}
|
||||
{/* Sağ alt — scroll göstergesi */}
|
||||
{loaded && (
|
||||
<div className="absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex flex-col items-center gap-2">
|
||||
<span className="text-white/30 text-xs tracking-widest uppercase">
|
||||
<motion.div
|
||||
style={{ opacity: taglineOpacity }}
|
||||
className="absolute bottom-20 right-10 z-10 flex flex-col items-center gap-2"
|
||||
>
|
||||
<span className="text-white/30 text-[10px] tracking-widest uppercase rotate-90 mb-2">
|
||||
{t('scroll')}
|
||||
</span>
|
||||
<div className="w-px h-10 bg-white/20 animate-pulse" />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
|
||||
{/* Alt progress bar */}
|
||||
<div className="absolute bottom-0 left-0 right-0 z-10 h-[2px] bg-white/10">
|
||||
<motion.div
|
||||
className="h-full bg-white/60 origin-left"
|
||||
style={{ scaleX: progressScaleX }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
Reference in New Issue
Block a user