Modern Paralaks Demo:

Aşağıda, yazıda anlatılan tekniklerin birleşimiyle oluşturulmuş bir demo örneği görebilirsiniz.
Canlı örnek ve kaynak kod için:

Framer Motion ile Modern Paralaks Efektler

Web sitelerinde paralaks efektleri, ziyaretçiye derinlik ve dinamizm hissi verir. Özellikle modern arayüzlerde, kaydırma ve fare hareketlerine duyarlı animasyonlar kullanıcı deneyimini bir üst seviyeye taşır. Bu yazıda, Framer Motion ve React ile sıfırdan paralaks efektleri oluşturmayı, gerçek dünya örnekleriyle birlikte öğreneceksiniz.

Paralaks Nedir?

Paralaks, farklı katmanların farklı hızlarda hareket etmesiyle oluşan bir derinlik illüzyonudur. Özellikle kaydırma sırasında arka plan ve ön plan öğelerinin farklı hızlarda hareket etmesiyle dikkat çekici bir görsel deneyim sunar.

Gerekli Kurulumlar

Projeye Framer Motion ve (isteğe bağlı olarak) Lenis ekleyin:

npm install framer-motion
npm install lenis

Temel Paralaks Efekti

En basit haliyle, bir görselin kaydırma ile birlikte y ekseninde hareket etmesini sağlayalım:

import { motion, useScroll, useTransform } from 'framer-motion'
import Image from 'next/image'

export default function ParallaxHero() {
  const { scrollYProgress } = useScroll()
  const y = useTransform(scrollYProgress, [0, 1], ['0vh', '40vh'])

  return (
    <div className="relative h-screen overflow-hidden">
      <motion.div style={{ y }} className="absolute inset-0">
        <Image
          src="/images/tutorials/parallax.png"
          fill
          alt="Parallax"
          style={{ objectFit: 'cover' }}
        />
      </motion.div>
      <div className="relative z-10 flex h-full items-center justify-center">
        <h1 className="text-6xl font-bold text-white drop-shadow-lg">
          Paralaks Efekti
        </h1>
      </div>
    </div>
  )
}

Detaylı Açıklama:

useScroll() hook'u, sayfanın ne kadar kaydırıldığını takip eder. scrollYProgress değeri 0 (sayfa başlangıcı) ile 1 (sayfa sonu) arasında değişir.
useTransform() fonksiyonu, kaydırma değerini harekete çevirir:
- İlk parametre: Takip edilecek değer (scrollYProgress)
- İkinci parametre: Giriş değer aralığı ([0, 1] - kaydırma başlangıcı ve sonu)
- Üçüncü parametre: Çıkış değer aralığı (['0vh', '40vh'] - hareket miktarı)
motion.div içine yerleştirdiğimiz resim, sayfa kaydırıldıkça yukarıdan aşağıya doğru 40vh kadar yer değiştirir.
relative, absolute ve z-10 CSS sınıfları katmanların doğru sıralanmasını sağlar.
Resmin üzerindeki metin içeren div, z-10 değeriyle resmin önünde kalır.

Birden Fazla Katman ile Paralaks

Birden fazla öğeyi farklı hızlarda hareket ettirerek derinlik hissini artırabilirsiniz:

import { motion, useScroll, useTransform } from 'framer-motion'

export default function MultiLayerParallax() {
  const { scrollYProgress } = useScroll()
  const bgY = useTransform(scrollYProgress, [0, 1], ['0vh', '60vh'])
  const fgY = useTransform(scrollYProgress, [0, 1], ['0vh', '20vh'])

  return (
    <div className="relative h-[150vh] overflow-hidden">
      <motion.div style={{ y: bgY }} className="absolute inset-0 -z-10">
        {/* Arka plan görseli */}
      </motion.div>
      <motion.div style={{ y: fgY }} className="absolute inset-0 z-10">
        {/* Ön plan görseli veya içerik */}
      </motion.div>
      <div className="relative z-20 flex h-screen items-center justify-center">
        <h2 className="text-5xl font-bold text-white">Çok Katmanlı Paralaks</h2>
      </div>
    </div>
  )
}

Detaylı Açıklama:

Bu örnekte iki ayrı katman oluşturuyoruz: arka plan (bgY) ve ön plan (fgY).
Arka plan daha fazla hareket eder (['0vh', '60vh']), bu da daha uzakta olduğu hissini verir.
Ön plan daha az hareket eder (['0vh', '20vh']), sanki bize daha yakınmış gibi görünür.
z-index değerleri (-z-10, z-10, z-20) ile katmanların öne-arkaya sıralamasını ayarlıyoruz.
Bileşenin toplam yüksekliği h-[150vh] ile sayfa yüksekliğinin 1.5 katı olarak ayarlanmıştır, böylece daha uzun bir kaydırma alanı oluşturulur.
Metin en üstteki katmanda (z-20) yer alır, böylece her zaman görünür kalır.

Pürüzsüz Kaydırma ile Paralaks (Lenis)

Daha akıcı bir deneyim için Lenis ile pürüzsüz kaydırma ekleyebilirsiniz:

import Lenis from '@studio-freight/lenis'
import { useEffect } from 'react'

export default function SmoothScrollWrapper({ children }) {
  useEffect(() => {
    const lenis = new Lenis({ smoothWheel: true })
    function raf(time) {
      lenis.raf(time)
      requestAnimationFrame(raf)
    }
    requestAnimationFrame(raf)
    return () => lenis.destroy()
  }, [])
  return <>{children}</>
}

Detaylı Açıklama:

Lenis, bir pürüzsüz kaydırma (smooth scrolling) kütüphanesidir ve paralaks efektlerini daha etkileyici hale getirir.
useEffect hook'u içinde Lenis'i başlatıyoruz ve component unmount olduğunda temizliyoruz.
smoothWheel: true seçeneği fare tekerleğiyle kaydırmayı pürüzsüz hale getirir.
raf (request animation frame) fonksiyonu, tarayıcının bir sonraki çizim anında Lenis'in güncelleme yapmasını sağlar.
requestAnimationFrame döngüsü, kaydırma animasyonlarının ekran yenileme hızıyla (60fps) uyumlu çalışmasını sağlar.
Bu bileşeni uygulamanızın kök bileşeninde kullanarak tüm sayfa için pürüzsüz kaydırma etkinleştirebilirsiniz.
{children} ile, bu bileşenin içine yerleştirilen tüm içeriği sarmalıyor ve pürüzsüz kaydırma özelliğini onlara uyguluyor.

Fare Hareketine Duyarlı Paralaks

Kullanıcı fareyi hareket ettirdikçe arka planı hafifçe oynatmak için:

import { useState, useEffect } from 'react'
import { motion } from 'framer-motion'

export default function MouseParallax() {
  const [pos, setPos] = useState({ x: 0, y: 0 })
  useEffect(() => {
    const handler = e => setPos({ x: e.clientX, y: e.clientY })
    window.addEventListener('mousemove', handler)
    return () => window.removeEventListener('mousemove', handler)
  }, [])
  return (
    <motion.div
      style={{
        x: pos.x * -0.02,
        y: pos.y * -0.02
      }}
      className="fixed inset-0 -z-10"
    >
      {/* Arka plan görseli */}
    </motion.div>
  )
}

Detaylı Açıklama:

Bu bileşen, fare konumunu takip eder ve arka planı fare hareketine tepki verecek şekilde hareket ettirir.
useState ile fare pozisyonunu saklamak için bir durum değişkeni tanımlıyoruz.
useEffect içinde mousemove olay dinleyicisi ekliyoruz. Bu, her fare hareketi olduğunda çalışır.
e.clientX ve e.clientY fare konumunun x ve y koordinatlarını piksel cinsinden verir.
pos.x * -0.02 ile fare hareketinin tersine doğru, ama daha küçük bir hareket oluşturuyoruz:
- -0.02 çarpanı, hareketin yönünü tersine çevirir ve boyutunu azaltır.
- Fare sağa hareket ettiğinde arka plan hafifçe sola, fare sola hareket ettiğinde arka plan hafifçe sağa kayar.
fixed ve inset-0 CSS sınıflarıyla arka planın tüm ekranı kaplamasını sağlıyoruz.
-z-10 değeri arka planın diğer içeriğin arkasında kalmasını sağlar.
Bu efekt, hafif bir "3B mekan" hissi yaratır ve kullanıcı etkileşimini daha ilgi çekici hale getirir.

Framer Motion ile paralaks efektleri oluşturmak hem kolay hem de eğlenceli.
Kendi projelerinizde bu teknikleri kullanarak ziyaretçilerinize unutulmaz bir deneyim sunabilirsiniz.

Sorularınızı iletişim formu aracılığıyla benimle paylaşabilirsiniz!