Google Gravity Nedir? Yerçekimi Efekti Nasıl Çalışır?

Google Gravity nedir?

Google Gravity, Google ana sayfasındaki arama kutusu, logo ve düğmelerin yerçekimi varmış gibi aşağı düşmesini sağlayan bir JavaScript deneyidir. Gerçek bir Google özelliği ya da fiziksel yerçekimi değildir. Tarayıcıdaki HTML öğeleri JavaScript ile hareket ettirilir; çarpışma ve sürükleme davranışları da yaklaşık bir fizik simülasyonuyla taklit edilir.

İlk gördüğünüzde sayfanın bozulduğunu düşünebilirsiniz. Ben de yıllar önce bağlantısı gönderilen bir sayfayı açtığımda tarayıcıda sorun olduğunu sanmıştım. Ortada bozuk bir sunucu, saldırı veya CSS hatası yoktu. Sayfanın kendisi, normalde sabit duran arayüz parçalarını küçük nesnelere dönüştüren bir tarayıcı deneyiydi.

Google Gravity nasıl ortaya çıktı?

Google Gravity, 2009 dönemindeki Chrome Experiments kültürünün dikkat çeken örneklerinden biri olarak bilinir. Deney, yaratıcı kodlama çalışmalarıyla tanınan Ricardo Cabello, yani Mr.doob tarafından hazırlandı. Amaç, Google ana sayfasının alışılmış düzenini bozup tarayıcıda çalışan JavaScript ve fizik hesaplamalarını eğlenceli bir gösterimle sunmaktı.

Buradaki Google adı biraz yanıltıcıdır. Bu sayfa, Google arama altyapısına eklenmiş standart bir özellik değildir. Google markasının ana sayfa düzeni görsel olarak taklit edilir; deneyin kendisi ise ayrı bir web sayfası veya benzer uygulama olarak çalışır. Bu ayrım önemli, çünkü arama sonuçlarında aynı isimle açılan her sayfa orijinal deney olmayabilir.

Yıllar içinde farklı alan adlarında, kopya sayfalarda ve güncellenmiş sürümlerde Google Gravity adı kullanıldı. Bazıları yalnızca görsel animasyon gösterirken bazıları nesneleri fareyle taşımanıza izin verir. Bu yüzden Google Gravity tek bir güncel URL’den çok, belirli bir JavaScript deneyinin ve onu taklit eden uygulamaların ortak adı gibi düşünülmeli.

Google Gravity nasıl çalışır?

Bir web sayfasının gördüğünüz kısmı, tarayıcının oluşturduğu Document Object Model, yani DOM ağacıdır. Google Gravity benzeri bir deney önce logoyu, arama alanını, düğmeleri ve bağlantıları DOM içindeki öğeler olarak bulur. Ardından bu öğelerin ekrandaki konumunu, hızını ve dönüş açısını JavaScript ile değiştirmeye başlar.

Sayfadaki her parça için basitleştirilmiş birkaç değer tutulabilir:

• Konum: Öğenin x ve y koordinatları.
• Hız: Yatay ve dikey yönde ne kadar hareket ettiği.
• İvme: Yerçekimi etkisi için her karede dikey hıza eklenen değer.
• Dönüş: Nesnenin düşerken veya çarparken hangi açıya döndüğü.
• Durum: Fareyle tutuluyor mu, zemine çarptı mı veya ekran dışına çıktı mı.

Tarayıcı, animasyon döngüsünü genellikle requestAnimationFrame() ile çalıştırır. Bu fonksiyon, bir sonraki ekran yenilemesinden hemen önce JavaScript kodunun tekrar çağrılmasını sağlar. Her çağrıda hız güncellenir, yeni konum hesaplanır ve CSS değerleri DOM öğesine uygulanır.

let velocityY = 0;
let positionY = 0;
const gravity = 0.45;

function frame() {
  velocityY += gravity;
  positionY += velocityY;
  element.style.transform = `translateY(${positionY}px)`;
  requestAnimationFrame(frame);
}

requestAnimationFrame(frame);

Bu kısa örnekte gravity, gerçek dünyadaki 9,81 m/s² değerini temsil etmez. Piksel tabanlı bir animasyonda güzel görünen bir sayıdır. Her karede dikey hız biraz artar, ardından öğe aşağı doğru taşınır. Gerçek Google Gravity uygulaması bundan daha karmaşık olabilir; burada yalnızca temel fikri gösteriyorum.

Çarpışma hesabı neden gerekli?

Yerçekimi değerini eklemek tek başına yeterli değildir. Nesneler ekranın altına doğru sınırsızca düşerse bir süre sonra görünmez olurlar. Deneyin eğlenceli görünmesi için sayfanın alt kısmı sanal bir zemin kabul edilir ve nesne bu sınıra geldiğinde dikey hız ters çevrilir.

if (positionY + elementHeight > floorY) {
  positionY = floorY - elementHeight;
  velocityY *= -0.35;
}

Buradaki -0.35 değeri, çarpışmadan sonra enerjinin azaldığını anlatır. Mutlak değer 1 olsaydı nesne her çarpışmada aynı yüksekliğe sıçrardı. Daha küçük bir değer ise birkaç sekmeden sonra hareketin sönmesini sağlar. Gerçek bir fizik motoru; kütle, sürtünme, dönme momenti ve farklı şekiller arasındaki çarpışmaları da hesaba katabilir.

Kısacası, efektin inandırıcı görünmesi birkaç CSS kuralından ibaret değildir. Küçük bir hesap döngüsü gerekir.

Google Gravity efektinde tarayıcı hangi işleri yapar?

Deneyin çalışması için sunucuda özel bir işlem yapılması gerekmez. HTML, CSS ve JavaScript dosyaları tarayıcıya ulaştıktan sonra hesaplamaların büyük bölümü kullanıcının cihazında gerçekleşir. Sunucu genellikle dosyaları teslim eder; nesnelerin düşmesi, fare hareketleri ve animasyon döngüsü istemci tarafında yürür.

Bu nedenle internet bağlantısı deneyim başladıktan sonra geçici olarak kesilse bile sayfa bir süre hareket etmeye devam edebilir. Yeni kaynak, görsel veya uzak bir API çağrısı gerekmiyorsa tarayıcı elindeki kodla animasyonu sürdürebilir. Sayfayı yenilerseniz dosyaların yeniden yüklenmesi gerekir.

Web sayfalarının istemci tarafında nasıl çalıştığını anlamak için İnternet Protokolleri: TCP/IP’den HTTP/3’e Derinlemesine Bakış yazısında anlatılan istek-cevap ayrımı da faydalıdır. HTTP ile dosyayı alırsınız; JavaScript, dosyanın tarayıcıda nasıl davranacağını belirler.

Google Gravity deneyi nasıl kullanılır?

Güvenilir bir kaynaktan açılan çalışan bir sürümde kullanım genellikle basittir:

1. Google Gravity deneyinin bulunduğu sayfayı modern bir tarayıcıda açın.
2. Sayfanın yüklenmesini bekleyin; öğeler kısa süre içinde aşağı doğru hareket eder.
3. Fare imlecini bir nesnenin üzerine getirip basılı tutun.
4. Basılı tutarken nesneyi başka bir konuma taşıyın.
5. Fare düğmesini bıraktığınızda nesnenin yeni konumdan düşmesini veya kaymasını izleyin.

Bazı kopya uygulamalarda dokunmatik ekran desteği bulunur. Telefonda nesneyi parmağınızla tutup sürükleyebilirsiniz, fakat her sürüm bunu desteklemez. Mobil tarayıcıda çalışmıyorsa bu mutlaka telefonunuzda sorun olduğu anlamına gelmez; kullanılan JavaScript kodu yalnızca fare olaylarını dinliyor olabilir.

Deney çalışmıyorsa geliştirici araçlarında konsolu açıp hatalara bakabilirsiniz. Uncaught TypeError veya eksik JavaScript dosyası gibi bir hata, sayfanın güncel tarayıcılarla uyumsuz olduğunu gösterebilir. Reklam engelleyiciler ve katı içerik güvenlik politikaları da bazı kopya sayfalardaki kaynakların yüklenmesini engelleyebilir.

Kendi Google Gravity efektinizi yapabilir misiniz?

Evet. Temel sürüm için bir HTML öğesi, birkaç CSS satırı ve bir animasyon döngüsü yeterlidir. Ancak yalnızca top ve left değerlerini sürekli değiştirmek verimsiz olabilir. Modern tarayıcılarda hareketli öğeler için çoğu zaman transform: translate() kullanmak daha akıcı sonuç verir.

<div id="ball">Demo</div>

<style>
#ball {
  position: fixed;
  top: 0;
  left: 40px;
  padding: 12px;
  background: #222;
  color: white;
}
</style>

<script>
const ball = document.querySelector('#ball');
let y = 0;
let speed = 0;
const floor = window.innerHeight - 60;

function animate() {
  speed += 0.5;
  y += speed;

  if (y > floor) {
    y = floor;
    speed *= -0.4;
  }

  ball.style.transform = `translateY(${y}px)`;
  requestAnimationFrame(animate);
}

animate();
</script>

Bu kod yalnızca açıklama amacıyla verilmiş küçük bir demodur. Blog altyapınızda doğrudan kullanmadan önce içerik güvenliği politikasını, mobil davranışı ve performansı test edin. Özellikle kullanıcı girdisini DOM’a ekleyen kodlarda kaçışlama yapılmazsa eğlenceli bir efekt, gereksiz bir XSS açığına dönüşebilir.

Hosting şirketinde çalışırken staging sandığım bir makinede nginx yapılandırmasını değiştirmiştim. Değişiklik küçük görünüyordu; bir proxy kuralının yerini düzenlemiştim. Fakat makine production çıktı ve birkaç dakika boyunca beklenmeyen yönlendirmeler gördük. O gün kırmızı production prompt kullanmaya başladım. Tarayıcı demolarında da aynı disiplin geçerli: değişiklik yapmadan önce hangi dosyayı, hangi ortamda ve hangi sürümle test ettiğinizi kontrol edin.

DOM öğelerini hareket ettirmenin üç yolu

Az sayıda nesne için DOM yaklaşımı yeterlidir. Yüzlerce parçacık, karmaşık çarpışma veya sürekli dönen şekiller eklenirse Canvas ya da bir fizik kütüphanesi daha uygun hale gelebilir. Küçük bir arayüz şakası için ağır bir bağımlılık eklemek ise bakım maliyeti yaratır.

Google Gravity ile benzer web deneyleri arasındaki fark nedir?

Google Gravity, belirli arayüz öğelerini yerçekimi etkisiyle düşüren bir deneydir. Google’ın diğer eğlenceli arama sürprizleri farklı davranışlara sahip olabilir. Örneğin bir sayfa dönebilir, arayüz eğilebilir veya arama sonuçları farklı bir animasyonla gösterilebilir. Hepsinin ortak noktası, normal bir web arayüzünü kısa süreliğine etkileşimli bir oyuncağa çevirmeleridir.

Bu ayrım arama niyeti açısından da iş görür. Google Gravity nedir diye arayan kişi çoğunlukla belirli bir düşme efektini sorar; Google easter egg araması ise daha geniş bir alanı kapsar. Aynı ifadeleri birbirinin yerine kullanmak, ziyaretçinin aradığı deneyimi bulmasını zorlaştırır.

Bu tür sayfalar güvenli mi?

Efektin kendisi genellikle basit istemci tarafı JavaScript’ten oluşur. Sayfanın güvenliğini yalnızca animasyonun masum görünmesine bakarak değerlendirmeyin. Kopya siteler reklam betikleri, bildirim izni talepleri veya şüpheli indirme bağlantıları ekleyebilir.

• Adres çubuğundaki alan adını kontrol edin.
• Tarayıcı bildirim izni isteyen sayfalara temkinli yaklaşın.
• Bir eklenti veya çalıştırılabilir dosya indirmeniz istenirse sayfayı kapatın.
• Şifre, kart bilgisi veya Google hesabı giriş bilgisi girmeyin.
• Kaynağı belli olmayan kopyaları iş veya müşteri cihazında açmayın.

Sayfanın kaynak kodunu incelemek istiyorsanız bunu izole bir tarayıcı profiliyle yapmak iyi bir alışkanlıktır. Sunucuda çalışan bir VPS’e bu tür betikleri indirip çalıştırmanın ise hiçbir anlamı yoktur. Tarayıcı efekti için Linux shell açmak, tornavidayla kahve karıştırmaya benzer.

Performans tarafında da küçük bir not var. Çok sayıda DOM öğesini her karede yeniden düzenlemek işlemci kullanımını artırabilir. Özellikle eski telefonlarda animasyon takılabilir. CMS Performans ve Hız Ayarları: WordPress, Joomla, Drupal yazısında anlatılan genel istemci performansı yaklaşımı burada da geçerli: önce gerçek darboğazı ölçün, sonra optimizasyon yapın.

Google Gravity neden çalışmıyor?

Deneyin açılmaması veya nesnelerin düşmemesi birkaç farklı nedene dayanabilir. En yaygın sorun, orijinal sayfanın artık aynı adreste bulunmaması ya da kopya sürümün eski JavaScript kullanmasıdır.

• JavaScript kapalıdır: Animasyon kodu çalışmayacağı için sayfa sabit kalır.
• Dosya yüklenmemiştir: Ağ sekmesinde 404 veya 403 yanıtları görülebilir.
• Tarayıcı uyumsuzdur: Eski kodlar güncel API davranışlarıyla çakışabilir.
• Mobil olayları eksiktir: Sürüm yalnızca mousedown ve mousemove dinliyor olabilir.
• İçerik engellenmiştir: Reklam engelleyici veya güvenlik eklentisi bir kaynağı kesebilir.

Kontrol için geliştirici araçlarını açıp Console ve Network sekmelerine bakın. İlk gördüğünüz hatayı arama motoruna yapıştırmadan önce dosya yolunu, HTTP durum kodunu ve hatanın hangi satırda oluştuğunu inceleyin. Vardiyada sık gördüğüm bir alışkanlık burada da geçerli: logu okumadan yeniden başlatmak nasıl kötü bir sunucu çözümüyse, konsola bakmadan tarayıcı değiştirmek de aynı refleksin küçük versiyonudur.

Google Gravity gerçek bir Google özelliği mi?

Hayır. Google Gravity, Google arama motorunun temel işlevlerinden biri değildir. Google adı ve ana sayfa görseli kullanıldığı için resmi bir ürün izlenimi verebilir; fakat deney, tarayıcıda çalışan bağımsız HTML, CSS ve JavaScript koduna dayanır.

Bu nedenle arama sonuçlarında gördüğünüz bir sayfanın Google tarafından işletildiğini varsaymayın. Alan adı, sertifika, sayfanın istediği izinler ve yüklediği üçüncü taraf kaynaklar birlikte incelenmeli. Sertifika bulunması da tek başına sayfanın Google’a ait olduğunu kanıtlamaz; HTTPS yalnızca bağlantının şifreli olduğunu gösterir.

Sık Sorulan Sorular

Google Gravity nedir, virüs mü?

Google Gravity, web sayfası öğelerini düşüyormuş gibi gösteren bir JavaScript deneyidir; tek başına virüs değildir. Yine de aynı adı kullanan kopya siteler zararlı reklam veya bildirim betikleri içerebilir, bu yüzden açtığınız adresi kontrol etmelisiniz.

Google Gravity telefonda çalışır mı?

Kullanılan sürüm dokunmatik olayları destekliyorsa telefonda da çalışabilir. Bazı eski kopyalar yalnızca fare olaylarını dinlediği için mobil cihazda nesneleri sürükleyemeyebilirsiniz.

Google Gravity nasıl yapılır?

HTML öğelerini JavaScript ile seçip her animasyon karesinde konum, hız ve dönüş değerlerini güncelleyerek yapılabilir. Basit bir sürümde requestAnimationFrame(), CSS transform ve ekran alt sınırı kontrolü yeterlidir.

Google Gravity resmi Google sayfası mı?

Hayır, Google Gravity resmi arama özelliği değil, Google ana sayfasını taklit eden bir web deneyidir. Kopya sayfalarda kişisel bilgi girmemek ve dosya indirmemek gerekir.