Hareketli web sitesi nedir?
Hareketli web sitesi (motion website), ziyaretçi sayfayı kaydırdıkça görsellerin, metinlerin ve 3D nesnelerin planlı bir akışla hareket ettiği sitedir. Ürün kendi etrafında döner, parçalarına ayrılır, ışık değişir; sayfa bir slayt gösterisi gibi değil, kaydırmayla ilerleyen kısa bir hikâye gibi okunur.
Buradaki amaç süs değil, anlatımdır. Bir yüzüğün taş yuvasını yakından göstermek, bir koltuğun kumaşını farklı ışıklarda sergilemek ya da bir ürünün nasıl çalıştığını adım adım anlatmak, düz bir fotoğraf galerisinden çok daha akılda kalıcı olabilir.
Hareketli sitelerin iyi örnekleri sade görünür: hareket, ziyaretçinin dikkatini doğru yere yönlendirir ve içerik her zaman okunabilir kalır. Kötü örneklerde ise animasyon içeriğin önüne geçer, sayfa ağırlaşır ve ziyaretçi aradığını bulamaz. Biz ilk yaklaşımı esas alırız.
Kısacası hareketli site, ürününü bir vitrinde sergilemek ile bir satış danışmanının elinde göstermek arasındaki farka benzer. Ziyaretçi neye bakacağını kendisi aramaz; sayfa onu adım adım en önemli ayrıntılara götürür.
Hangi işlerde hareketli site mantıklıdır?
Hareketli site; ürünün görünüşünün, dokusunun ya da çalışma biçiminin satın alma kararında belirleyici olduğu işlerde ve kısa sürede güçlü bir izlenim bırakmak istediğin lansmanlarda mantıklıdır. Her site için gerekli değildir; bazen sade ve hızlı bir sayfa daha doğru seçimdir.
Sık karşılaştığımız kullanım örnekleri:
Mevcut sitenin tamamını hareketli yapmak yerine çoğu zaman tek bir bölümle başlamanı öneririz: örneğin anasayfanın açılış alanı ya da yeni koleksiyonun tanıtım sayfası. Böylece etkisini görür, beğenirsen diğer sayfalara yayarsın.
Bir kampanya sayfasını Google Ads veya Meta reklamlarının açılış sayfası olarak kullanacaksan dönüşüm takibini de baştan kurarız. Böylece hareketli sayfanın gerçekten satışa ya da talebe dönüşüp dönüşmediğini ölçebilirsin.
- Yeni ürün veya koleksiyon lansman sayfaları
- Özel gün ve sezon kampanya sayfaları
- Kuyumcu ve takı markaları için 3D ürünlü anasayfa
- Mobilya ve aydınlatma ürünleri için malzeme ve renk sahneleri
- Fuar, etkinlik ve marka tanıtım sayfaları
- Teknoloji ürünlerinin parça parça anlatıldığı tanıtım sayfaları
Three.js, WebGL ve GSAP ile nasıl çalışıyoruz?
Three.js ile tarayıcıda gerçek zamanlı 3D sahneler kurar, bunları WebGL üzerinden ekran kartının gücüyle çizeriz; GSAP ve onun ScrollTrigger eklentisiyle de bu sahnelerin kaydırmaya bağlı olarak nasıl hareket edeceğini yönetiriz. Bu üçlü, eklenti ya da uygulama gerektirmeden modern tarayıcıların hepsinde çalışır.
Süreç bir senaryoyla başlar: ziyaretçi sayfaya girdiğinde ilk ne görecek, kaydırdıkça hangi sırayla ne anlatılacak, nerede durup ürünü inceleyecek, sayfa hangi eylemle bitecek? Bu akışı tıklanabilir bir taslağa dönüştürür, seninle birlikte son hâline getiririz.
3D modeller elimizde değilse ürün fotoğraflarından 3D model üretebiliriz. Modelleri web için sıkıştırır, dokuları optimize eder ve sahnenin ışığını ürünün gerçek görünüşüne sadık kalacak şekilde ayarlarız.
Hareketli sayfa WordPress veya WooCommerce sitenin bir parçası olabilir, ayrı bir lansman sayfası olarak da yayınlanabilir. Shopify ya da İkas gibi hazır platformlarda ise sayfaya eklenen bir kodla çalışacak şekilde kurgulanabilir.
Geliştirme boyunca ara sürümleri bir bağlantı üzerinden paylaşırız; sahneleri kendi telefonunda ve bilgisayarında deneyerek yorum yaparsın. Her değişiklik önce sana sorulur.
Hareketli site yavaş olur mu, SEO'ya zarar verir mi?
Doğru kurulduğunda hayır; hareketli bir site de hızlı açılabilir ve arama motorlarınca rahatça okunabilir. Önemli olan, ağır 3D dosyaların ve animasyon kodlarının sayfanın ilk açılışını bekletmemesi ve içeriğin animasyondan bağımsız olarak sayfada bulunmasıdır.
Bunun için sayfa metnini, başlıkları ve bağlantıları normal HTML olarak yazarız; animasyon bu içeriğin üstüne bir katman olarak eklenir. Böylece Google ve yapay zeka asistanları sayfanın ne anlattığını animasyonu çalıştırmadan da anlayabilir.
3D sahneleri ziyaretçi o bölüme yaklaştığında yükler, modelleri sıkıştırır ve mobil cihazlar için daha hafif sürümler hazırlarız. Core Web Vitals değerlerini (LCP, INP, CLS) yayından önce ölçer, gerekiyorsa sahnede sadeleştirmeye gideriz. Etkileyici görünmek ile hızlı açılmak arasında seçim yapmak zorunda kalmaman için çalışırız.
Mobil uyum ve erişilebilirlik nasıl sağlanır?
Hareketli siteleri baştan telefon için tasarlarız; masaüstündeki sahneyi küçültmek yerine mobilde kendi düzenine sahip bir akış kurarız. Dokunmatik ekranda kaydırma, yakınlaştırma ve döndürme hareketlerinin doğal hissettirmesine özen gösteririz.
Bazı ziyaretçiler cihaz ayarlarında hareketi azaltmayı tercih eder. Bu tercihi (prefers-reduced-motion) algılar, o ziyaretçilere aynı içeriği daha sakin geçişlerle sunarız. Metinlerin okunabilir kontrastta olması, düğmelerin klavyeyle de kullanılabilmesi gibi temel erişilebilirlik kurallarını da animasyon uğruna göz ardı etmeyiz.
Eski ya da düşük donanımlı cihazlarda 3D sahne beklendiği gibi çalışmazsa sayfa otomatik olarak görsel ve metinden oluşan sade bir sürüme geçer. Böylece hiçbir ziyaretçi boş bir ekranla karşılaşmaz.
Örnek çalışma: Grande Amor Kuyumculuk için Lagün konsepti
Grande Amor Kuyumculuk için gümüş takıların 3D olarak sahnelendiği Lagün adlı bir anasayfa konsepti hazırladık. Bu çalışmada amaç, ziyaretçinin takıyı yakından, farklı açılardan ve ışıkta nasıl parladığını görerek incelemesiydi.
Benzer bir yaklaşım farklı sektörlerde de kullanılabilir: bir doğal taş mağazası taşların dokusunu, bir mobilya markası kumaş ve renk seçeneklerini, bir aydınlatma firması ürünün yaydığı ışığı sahnede gösterebilir. Ürün sayfasında müşterinin kendisinin denemesini istiyorsan “Parmağında gör” sanal deneme ve 3D vitrin modu da bu sahnelerle birlikte çalışabilir.
Konsept çalışmalarda önce markanın hissini yakalamaya odaklanırız: renk, ışık, hareket hızı ve sahneler arası geçişler markanın tonuna uygun olmalıdır. Gümüş takı gibi parlak yüzeyli ürünlerde yansımaların doğal görünmesi için ışık ayarlarına ayrıca zaman ayırırız.
Lansman sayfası ne kadar sürede hazır olur?
Tek sayfalık bir lansman sayfası genelde birkaç gün içinde tıklanabilir taslak hâline gelir. Bu taslakta sahnelerin sırasını, ana hareketleri ve metinleri görür, değişiklik isteklerini iletirsin.
Taslaktan yayına kadar geçen süre; 3D modellerin hazır olup olmamasına, sahne sayısına ve istenen ayrıntı düzeyine göre değişir. Lansman tarihin belliyse bunu tanışmada söylemen yeterli; takvimi ona göre planlar, yazılı teklifte adım adım belirtiriz.
Lansmandan sonra sayfayı kaldırmak zorunda değilsin; kampanya bittiğinde arşiv sayfasına dönüştürebilir ya da bir sonraki koleksiyon için sahneleri yeni ürünlerle güncelleyebiliriz.