Animasyonlu kurumsal web sitesi: scroll ile anlatılan site ne kazandırır, ne kadar sürer, nelere dikkat edilir
Scrollytelling / hareketli kurumsal web sitesi nedir, hangi markalara uyar, Wix ve hazır temadan farkı, performans ve SEO dengesi (Core Web Vitals), 3D ve WebGL kullanımı, süreç ve süre. Creatune'un kendi sitesi örneğiyle.
Kurumsal web sitelerinin çoğu bir broşürün ekrana taşınmış hâlidir. Animasyonlu, scroll ile anlatılan site ise ziyaretçiyi bir yolculuğa sokar: kaydırdıkça ürün döner, başlık satır satır gelir, sahne değişir. Ziyaretçi okumaz, deneyimler — ve hatırlar.
Kime uyar?
- Ürün lansmanı olan markalar (tek ürün, tek hikâye)
- Ajans, stüdyo, mimarlık, iç mimarlık — işin kendisi görsel
- Otomotiv, mobilya, teknoloji — 3D modeli olan her ürün
- Premium hizmet satan firmalar — sitenin kendisi kalite kanıtı
Uymayan: yüzlerce ürünlü e-ticaret, haber siteleri, sık güncellenen katalog. Orada hız ve düzen animasyondan önemli.
Nasıl kuruluyor? (Creatune yaklaşımı)
Kendi sitemiz creatuneagency.com bu mantıkla kuruldu: siyah zemin, tek grotesk font, krom tipografi, scroll ile tam tur dönen maskot, kaydırdıkça akan metinler. Teknik iskelet:
- Statik HTML tabanı. Her sayfa gerçek HTML olarak üretilir; arama motoru ve yapay zeka botları animasyon olmadan da tüm içeriği okur.
- Scroll motoru. GSAP ScrollTrigger + Lenis: bölümler sabitlenir (pin), hareket kaydırma yüzdesine bağlanır (scrub).
- 3D katman. Three.js ile gerçek 3D (krom kelime) ya da kare dizisi (turntable video → alfa kesilmiş 120 kare) — cihaz gücüne göre seçilir. WebGL yoksa statik görsel kalır.
- Performans bütçesi. Ana paket 10 KB altı, ağır kütüphaneler dinamik yüklenir, görseller WebP ve boyutlanmış; LCP < 2,5 s, CLS < 0,1.
- Erişilebilirlik.
prefers-reduced-motionaçık kullanıcıda kendi kendine hareket kapanır, içerik aynı kalır. - İki dil = iki URL. Dil toggle değil,
/ve/en/— SEO ve GEO için doğru olan bu.
SEO ve GEO ile çelişmez
"Animasyonlu site Google'da çıkmaz" inancı, içeriğin JavaScript'le sonradan basıldığı eski sitelerden kalma. Bugün doğru kurulum:
- İçerik statik HTML'de, animasyon üstüne ekleniyor
- Her sayfa kendi title / description / JSON-LD (Organization, Service, FAQ, Breadcrumb) ile
- Sitemap + hreflang,
robots.txt,llms.txt - Görseller
altmetinli,loading="lazy" - Blog gerçek Markdown'dan üretiliyor; yeni yazı = yeni URL
Bu yüzden Creatune sitesi hem tam animasyonlu hem de bu yazıyı okuyabildiğin kadar indekslenebilir. Yapay zeka arama motorları için ayrıca: GEO nedir?
Süreç ve süre
| Aşama | Süre | Çıktı |
|---|---|---|
| Keşif + içerik haritası | 3–5 gün | sayfa listesi, hikâye akışı, metin taslağı |
| Yön (tasarım dili) | 1 hafta | 1–2 ekran, tipografi, renk, hareket dili |
| Üretim | 2–4 hafta | tüm sayfalar, animasyon, 3D, iki dil |
| Test + yayın | 3–5 gün | gerçek cihaz testi, Lighthouse, DNS, SSL |
Tek sayfalık lansman sitesi 2–3 hafta; 5–8 sayfalık kurumsal site 4–8 hafta. Barındırma statik (Netlify/Vercel), aylık maliyet sıfıra yakın; alan adı sizde kalır.
Ne getirin?
Marka kılavuzu (logo, renk, font), ürün görselleri / 3D modeli (yoksa biz üretiriz — Oyun & 3D), metinlerin ilk taslağı, beğendiğiniz 2–3 site. Gerisi bizde.
Kurumsal ve premium web siteleri için WhatsApp'tan ya da e-postayla yazın; 48 saat içinde yön ve teklif dönüyoruz.
Sık sorulanlar
1.Scrollytelling web sitesi nedir?
Sayfayı kaydırdıkça hikâyenin ilerlediği site — bölümler sabitlenir, görseller kaydırmayla hareket eder, 3D nesneler döner, başlıklar satır satır belirir. Ürün lansmanları, ajanslar, mimarlık, otomotiv ve premium markalar için kullanılır; ziyaretçi okumak yerine deneyimler.
2.Animasyonlu site SEO'ya zarar verir mi?
Doğru kurulursa hayır. İçerik statik HTML olarak sunulur (animasyon üstüne eklenir), her sayfanın kendi URL'si, başlığı ve yapılandırılmış verisi olur, ağır kütüphaneler ihtiyaç anında yüklenir ve Core Web Vitals hedefleri (LCP < 2,5 s, CLS < 0,1, INP < 200 ms) korunur. Creatune'un kendi sitesi bu yaklaşımla kuruldu.
3.Kurumsal animasyonlu site ne kadar sürer?
Tek sayfalık lansman sitesi 2–3 hafta; 5–8 sayfalık kurumsal site, iki dil ve blog ile 4–8 hafta. Süreyi içerik hazırlığı (metin, görsel, video) en çok etkiler.
4.Wix / WordPress temasından farkı ne?
Hazır tema herkeste aynı iskelettir ve animasyonu eklenti olarak taşır; ağırdır, özelleştirmesi sınırlıdır. Kod tabanlı özel site markaya göre kurulur, hafiftir, ölçülebilir ve tamamen sizindir (Netlify/Vercel gibi statik barındırmada aylık maliyet sıfıra yakın).
