{"id":515,"date":"2026-09-06T17:29:36","date_gmt":"2026-09-06T17:29:36","guid":{"rendered":"https:\/\/www.vps.tc\/blog\/?p=515"},"modified":"2026-09-06T00:19:56","modified_gmt":"2026-09-06T00:19:56","slug":"google-gravity-nedir-yercekimi-efekti-nasil-calisir","status":"publish","type":"post","link":"https:\/\/www.vps.tc\/blog\/tr\/google-gravity-nedir-yercekimi-efekti-nasil-calisir\/","title":{"rendered":"Google Gravity Nedir? Yer\u00e7ekimi Efekti Nas\u0131l \u00c7al\u0131\u015f\u0131r?"},"content":{"rendered":"<div class=\"aiw-toc\" style=\"border:1px solid #dbe3ea;border-radius:8px;padding:16px 20px;margin:0 0 28px\"><strong>\u0130\u00e7indekiler<\/strong><\/p>\n<ol style=\"margin:10px 0 0;padding-left:22px\">\n<li><a href=\"#google-gravity-nedir\">Google Gravity nedir?<\/a><\/li>\n<li><a href=\"#google-gravity-nasil-ortaya-cikti\">Google Gravity nas\u0131l ortaya \u00e7\u0131kt\u0131?<\/a><\/li>\n<li><a href=\"#google-gravity-nasil-calisir\">Google Gravity nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/a><\/li>\n<li><a href=\"#google-gravity-efektinde-tarayici-hangi-isleri-yapar\">Google Gravity efektinde taray\u0131c\u0131 hangi i\u015fleri yapar?<\/a><\/li>\n<li><a href=\"#google-gravity-deneyi-nasil-kullanilir\">Google Gravity deneyi nas\u0131l kullan\u0131l\u0131r?<\/a><\/li>\n<li><a href=\"#kendi-google-gravity-efektinizi-yapabilir-misiniz\">Kendi Google Gravity efektinizi yapabilir misiniz?<\/a><\/li>\n<li><a href=\"#google-gravity-ile-benzer-web-deneyleri-arasindaki-fark-nedir\">Google Gravity ile benzer web deneyleri aras\u0131ndaki fark nedir?<\/a><\/li>\n<li><a href=\"#bu-tur-sayfalar-guvenli-mi\">Bu t\u00fcr sayfalar g\u00fcvenli mi?<\/a><\/li>\n<li><a href=\"#google-gravity-neden-calismiyor\">Google Gravity neden \u00e7al\u0131\u015fm\u0131yor?<\/a><\/li>\n<li><a href=\"#google-gravity-gercek-bir-google-ozelligi-mi\">Google Gravity ger\u00e7ek bir Google \u00f6zelli\u011fi mi?<\/a><\/li>\n<li><a href=\"#sik-sorulan-sorular\">S\u0131k Sorulan Sorular<\/a><\/li>\n<\/ol>\n<\/div>\n<h2 id=\"google-gravity-nedir\">Google Gravity nedir?<\/h2>\n<p>Google Gravity, Google ana sayfas\u0131ndaki arama kutusu, logo ve d\u00fc\u011fmelerin yer\u00e7ekimi varm\u0131\u015f gibi a\u015fa\u011f\u0131 d\u00fc\u015fmesini sa\u011flayan bir JavaScript deneyidir. Ger\u00e7ek bir Google \u00f6zelli\u011fi ya da fiziksel yer\u00e7ekimi de\u011fildir. Taray\u0131c\u0131daki HTML \u00f6\u011feleri JavaScript ile hareket ettirilir; \u00e7arp\u0131\u015fma ve s\u00fcr\u00fckleme davran\u0131\u015flar\u0131 da yakla\u015f\u0131k bir fizik sim\u00fclasyonuyla taklit edilir.<\/p>\n<p>\u0130lk g\u00f6rd\u00fc\u011f\u00fcn\u00fczde sayfan\u0131n bozuldu\u011funu d\u00fc\u015f\u00fcnebilirsiniz. Ben de y\u0131llar \u00f6nce ba\u011flant\u0131s\u0131 g\u00f6nderilen bir sayfay\u0131 a\u00e7t\u0131\u011f\u0131mda taray\u0131c\u0131da sorun oldu\u011funu sanm\u0131\u015ft\u0131m. Ortada bozuk bir sunucu, sald\u0131r\u0131 veya CSS hatas\u0131 yoktu. Sayfan\u0131n kendisi, normalde sabit duran aray\u00fcz par\u00e7alar\u0131n\u0131 k\u00fc\u00e7\u00fck nesnelere d\u00f6n\u00fc\u015ft\u00fcren bir taray\u0131c\u0131 deneyiydi.<\/p>\n<h2 id=\"google-gravity-nasil-ortaya-cikti\">Google Gravity nas\u0131l ortaya \u00e7\u0131kt\u0131?<\/h2>\n<p>Google Gravity, 2009 d\u00f6nemindeki Chrome Experiments k\u00fclt\u00fcr\u00fcn\u00fcn dikkat \u00e7eken \u00f6rneklerinden biri olarak bilinir. Deney, yarat\u0131c\u0131 kodlama \u00e7al\u0131\u015fmalar\u0131yla tan\u0131nan Ricardo Cabello, yani Mr.doob taraf\u0131ndan haz\u0131rland\u0131. Ama\u00e7, Google ana sayfas\u0131n\u0131n al\u0131\u015f\u0131lm\u0131\u015f d\u00fczenini bozup taray\u0131c\u0131da \u00e7al\u0131\u015fan JavaScript ve fizik hesaplamalar\u0131n\u0131 e\u011flenceli bir g\u00f6sterimle sunmakt\u0131.<\/p>\n<p>Buradaki <code>Google<\/code> ad\u0131 biraz yan\u0131lt\u0131c\u0131d\u0131r. Bu sayfa, Google arama altyap\u0131s\u0131na eklenmi\u015f standart bir \u00f6zellik de\u011fildir. Google markas\u0131n\u0131n ana sayfa d\u00fczeni g\u00f6rsel olarak taklit edilir; deneyin kendisi ise ayr\u0131 bir web sayfas\u0131 veya benzer uygulama olarak \u00e7al\u0131\u015f\u0131r. Bu ayr\u0131m \u00f6nemli, \u00e7\u00fcnk\u00fc arama sonu\u00e7lar\u0131nda ayn\u0131 isimle a\u00e7\u0131lan her sayfa orijinal deney olmayabilir.<\/p>\n<p>Y\u0131llar i\u00e7inde farkl\u0131 alan adlar\u0131nda, kopya sayfalarda ve g\u00fcncellenmi\u015f s\u00fcr\u00fcmlerde Google Gravity ad\u0131 kullan\u0131ld\u0131. Baz\u0131lar\u0131 yaln\u0131zca g\u00f6rsel animasyon g\u00f6sterirken baz\u0131lar\u0131 nesneleri fareyle ta\u015f\u0131man\u0131za izin verir. Bu y\u00fczden <em>Google Gravity<\/em> tek bir g\u00fcncel URL&#8217;den \u00e7ok, belirli bir JavaScript deneyinin ve onu taklit eden uygulamalar\u0131n ortak ad\u0131 gibi d\u00fc\u015f\u00fcn\u00fclmeli.<\/p>\n<h2 id=\"google-gravity-nasil-calisir\">Google Gravity nas\u0131l \u00e7al\u0131\u015f\u0131r?<\/h2>\n<p>Bir web sayfas\u0131n\u0131n g\u00f6rd\u00fc\u011f\u00fcn\u00fcz k\u0131sm\u0131, taray\u0131c\u0131n\u0131n olu\u015fturdu\u011fu Document Object Model, yani DOM a\u011fac\u0131d\u0131r. Google Gravity benzeri bir deney \u00f6nce logoyu, arama alan\u0131n\u0131, d\u00fc\u011fmeleri ve ba\u011flant\u0131lar\u0131 DOM i\u00e7indeki \u00f6\u011feler olarak bulur. Ard\u0131ndan bu \u00f6\u011felerin ekrandaki konumunu, h\u0131z\u0131n\u0131 ve d\u00f6n\u00fc\u015f a\u00e7\u0131s\u0131n\u0131 JavaScript ile de\u011fi\u015ftirmeye ba\u015flar.<\/p>\n<p>Sayfadaki her par\u00e7a i\u00e7in basitle\u015ftirilmi\u015f birka\u00e7 de\u011fer tutulabilir:<\/p>\n<ul>\n<li><strong>Konum:<\/strong> \u00d6\u011fenin x ve y koordinatlar\u0131.<\/li>\n<li><strong>H\u0131z:<\/strong> Yatay ve dikey y\u00f6nde ne kadar hareket etti\u011fi.<\/li>\n<li><strong>\u0130vme:<\/strong> Yer\u00e7ekimi etkisi i\u00e7in her karede dikey h\u0131za eklenen de\u011fer.<\/li>\n<li><strong>D\u00f6n\u00fc\u015f:<\/strong> Nesnenin d\u00fc\u015ferken veya \u00e7arparken hangi a\u00e7\u0131ya d\u00f6nd\u00fc\u011f\u00fc.<\/li>\n<li><strong>Durum:<\/strong> Fareyle tutuluyor mu, zemine \u00e7arpt\u0131 m\u0131 veya ekran d\u0131\u015f\u0131na \u00e7\u0131kt\u0131 m\u0131.<\/li>\n<\/ul>\n<p>Taray\u0131c\u0131, animasyon d\u00f6ng\u00fcs\u00fcn\u00fc genellikle <code>requestAnimationFrame()<\/code> ile \u00e7al\u0131\u015ft\u0131r\u0131r. Bu fonksiyon, bir sonraki ekran yenilemesinden hemen \u00f6nce JavaScript kodunun tekrar \u00e7a\u011fr\u0131lmas\u0131n\u0131 sa\u011flar. Her \u00e7a\u011fr\u0131da h\u0131z g\u00fcncellenir, yeni konum hesaplan\u0131r ve CSS de\u011ferleri DOM \u00f6\u011fesine uygulan\u0131r.<\/p>\n<pre><code>let velocityY = 0;\nlet positionY = 0;\nconst gravity = 0.45;\n\nfunction frame() {\n  velocityY += gravity;\n  positionY += velocityY;\n  element.style.transform = `translateY(${positionY}px)`;\n  requestAnimationFrame(frame);\n}\n\nrequestAnimationFrame(frame);<\/code><\/pre>\n<p>Bu k\u0131sa \u00f6rnekte <code>gravity<\/code>, ger\u00e7ek d\u00fcnyadaki 9,81 m\/s\u00b2 de\u011ferini temsil etmez. Piksel tabanl\u0131 bir animasyonda g\u00fczel g\u00f6r\u00fcnen bir say\u0131d\u0131r. Her karede dikey h\u0131z biraz artar, ard\u0131ndan \u00f6\u011fe a\u015fa\u011f\u0131 do\u011fru ta\u015f\u0131n\u0131r. Ger\u00e7ek Google Gravity uygulamas\u0131 bundan daha karma\u015f\u0131k olabilir; burada yaln\u0131zca temel fikri g\u00f6steriyorum.<\/p>\n<h3>\u00c7arp\u0131\u015fma hesab\u0131 neden gerekli?<\/h3>\n<p>Yer\u00e7ekimi de\u011ferini eklemek tek ba\u015f\u0131na yeterli de\u011fildir. Nesneler ekran\u0131n alt\u0131na do\u011fru s\u0131n\u0131rs\u0131zca d\u00fc\u015ferse bir s\u00fcre sonra g\u00f6r\u00fcnmez olurlar. Deneyin e\u011flenceli g\u00f6r\u00fcnmesi i\u00e7in sayfan\u0131n alt k\u0131sm\u0131 sanal bir zemin kabul edilir ve nesne bu s\u0131n\u0131ra geldi\u011finde dikey h\u0131z ters \u00e7evrilir.<\/p>\n<pre><code>if (positionY + elementHeight &gt; floorY) {\n  positionY = floorY - elementHeight;\n  velocityY *= -0.35;\n}<\/code><\/pre>\n<p>Buradaki <code>-0.35<\/code> de\u011feri, \u00e7arp\u0131\u015fmadan sonra enerjinin azald\u0131\u011f\u0131n\u0131 anlat\u0131r. Mutlak de\u011fer 1 olsayd\u0131 nesne her \u00e7arp\u0131\u015fmada ayn\u0131 y\u00fcksekli\u011fe s\u0131\u00e7rard\u0131. Daha k\u00fc\u00e7\u00fck bir de\u011fer ise birka\u00e7 sekmeden sonra hareketin s\u00f6nmesini sa\u011flar. Ger\u00e7ek bir fizik motoru; k\u00fctle, s\u00fcrt\u00fcnme, d\u00f6nme momenti ve farkl\u0131 \u015fekiller aras\u0131ndaki \u00e7arp\u0131\u015fmalar\u0131 da hesaba katabilir.<\/p>\n<p>K\u0131sacas\u0131, efektin inand\u0131r\u0131c\u0131 g\u00f6r\u00fcnmesi birka\u00e7 CSS kural\u0131ndan ibaret de\u011fildir. K\u00fc\u00e7\u00fck bir hesap d\u00f6ng\u00fcs\u00fc gerekir.<\/p>\n<h2 id=\"google-gravity-efektinde-tarayici-hangi-isleri-yapar\">Google Gravity efektinde taray\u0131c\u0131 hangi i\u015fleri yapar?<\/h2>\n<p>Deneyin \u00e7al\u0131\u015fmas\u0131 i\u00e7in sunucuda \u00f6zel bir i\u015flem yap\u0131lmas\u0131 gerekmez. HTML, CSS ve JavaScript dosyalar\u0131 taray\u0131c\u0131ya ula\u015ft\u0131ktan sonra hesaplamalar\u0131n b\u00fcy\u00fck b\u00f6l\u00fcm\u00fc kullan\u0131c\u0131n\u0131n cihaz\u0131nda ger\u00e7ekle\u015fir. Sunucu genellikle dosyalar\u0131 teslim eder; nesnelerin d\u00fc\u015fmesi, fare hareketleri ve animasyon d\u00f6ng\u00fcs\u00fc istemci taraf\u0131nda y\u00fcr\u00fcr.<\/p>\n<table>\n<thead>\n<tr>\n<th>Bile\u015fen<\/th>\n<th>G\u00f6revi<\/th>\n<th>Google Gravity i\u00e7indeki kar\u015f\u0131l\u0131\u011f\u0131<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>HTML<\/td>\n<td>Sayfan\u0131n yap\u0131s\u0131n\u0131 tan\u0131mlar<\/td>\n<td>Logo, arama kutusu ve d\u00fc\u011fmeler<\/td>\n<\/tr>\n<tr>\n<td>CSS<\/td>\n<td>G\u00f6r\u00fcn\u00fcm ve yerle\u015fimi belirler<\/td>\n<td>Renk, boyut, konum ve d\u00f6n\u00fc\u015f<\/td>\n<\/tr>\n<tr>\n<td>JavaScript<\/td>\n<td>Davran\u0131\u015f\u0131 ve hesaplamay\u0131 y\u00f6netir<\/td>\n<td>Yer\u00e7ekimi, s\u00fcr\u00fckleme, \u00e7arp\u0131\u015fma<\/td>\n<\/tr>\n<tr>\n<td>Taray\u0131c\u0131<\/td>\n<td>Kodu \u00e7al\u0131\u015ft\u0131r\u0131p g\u00f6r\u00fcnt\u00fcy\u00fc \u00fcretir<\/td>\n<td>Animasyonun ekranda g\u00f6sterilmesi<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Bu nedenle internet ba\u011flant\u0131s\u0131 deneyim ba\u015flad\u0131ktan sonra ge\u00e7ici olarak kesilse bile sayfa bir s\u00fcre hareket etmeye devam edebilir. Yeni kaynak, g\u00f6rsel veya uzak bir API \u00e7a\u011fr\u0131s\u0131 gerekmiyorsa taray\u0131c\u0131 elindeki kodla animasyonu s\u00fcrd\u00fcrebilir. Sayfay\u0131 yenilerseniz dosyalar\u0131n yeniden y\u00fcklenmesi gerekir.<\/p>\n<p>Web sayfalar\u0131n\u0131n istemci taraf\u0131nda nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 anlamak i\u00e7in <a href=\"https:\/\/www.vps.tc\/blog\/tr\/internet-protokolleri-tcp-ipden-http-3e-derinlemesine-bakis\/\">\u0130nternet Protokolleri: TCP\/IP&#8217;den HTTP\/3&#8217;e Derinlemesine Bak\u0131\u015f<\/a> yaz\u0131s\u0131nda anlat\u0131lan istek-cevap ayr\u0131m\u0131 da faydal\u0131d\u0131r. HTTP ile dosyay\u0131 al\u0131rs\u0131n\u0131z; JavaScript, dosyan\u0131n taray\u0131c\u0131da nas\u0131l davranaca\u011f\u0131n\u0131 belirler.<\/p>\n<h2 id=\"google-gravity-deneyi-nasil-kullanilir\">Google Gravity deneyi nas\u0131l kullan\u0131l\u0131r?<\/h2>\n<p>G\u00fcvenilir bir kaynaktan a\u00e7\u0131lan \u00e7al\u0131\u015fan bir s\u00fcr\u00fcmde kullan\u0131m genellikle basittir:<\/p>\n<ol>\n<li>Google Gravity deneyinin bulundu\u011fu sayfay\u0131 modern bir taray\u0131c\u0131da a\u00e7\u0131n.<\/li>\n<li>Sayfan\u0131n y\u00fcklenmesini bekleyin; \u00f6\u011feler k\u0131sa s\u00fcre i\u00e7inde a\u015fa\u011f\u0131 do\u011fru hareket eder.<\/li>\n<li>Fare imlecini bir nesnenin \u00fczerine getirip bas\u0131l\u0131 tutun.<\/li>\n<li>Bas\u0131l\u0131 tutarken nesneyi ba\u015fka bir konuma ta\u015f\u0131y\u0131n.<\/li>\n<li>Fare d\u00fc\u011fmesini b\u0131rakt\u0131\u011f\u0131n\u0131zda nesnenin yeni konumdan d\u00fc\u015fmesini veya kaymas\u0131n\u0131 izleyin.<\/li>\n<\/ol>\n<p>Baz\u0131 kopya uygulamalarda dokunmatik ekran deste\u011fi bulunur. Telefonda nesneyi parma\u011f\u0131n\u0131zla tutup s\u00fcr\u00fckleyebilirsiniz, fakat her s\u00fcr\u00fcm bunu desteklemez. Mobil taray\u0131c\u0131da \u00e7al\u0131\u015fm\u0131yorsa bu mutlaka telefonunuzda sorun oldu\u011fu anlam\u0131na gelmez; kullan\u0131lan JavaScript kodu yaln\u0131zca fare olaylar\u0131n\u0131 dinliyor olabilir.<\/p>\n<p>Deney \u00e7al\u0131\u015fm\u0131yorsa geli\u015ftirici ara\u00e7lar\u0131nda konsolu a\u00e7\u0131p hatalara bakabilirsiniz. <code>Uncaught TypeError<\/code> veya eksik JavaScript dosyas\u0131 gibi bir hata, sayfan\u0131n g\u00fcncel taray\u0131c\u0131larla uyumsuz oldu\u011funu g\u00f6sterebilir. Reklam engelleyiciler ve kat\u0131 i\u00e7erik g\u00fcvenlik politikalar\u0131 da baz\u0131 kopya sayfalardaki kaynaklar\u0131n y\u00fcklenmesini engelleyebilir.<\/p>\n<h2 id=\"kendi-google-gravity-efektinizi-yapabilir-misiniz\">Kendi Google Gravity efektinizi yapabilir misiniz?<\/h2>\n<p>Evet. Temel s\u00fcr\u00fcm i\u00e7in bir HTML \u00f6\u011fesi, birka\u00e7 CSS sat\u0131r\u0131 ve bir animasyon d\u00f6ng\u00fcs\u00fc yeterlidir. Ancak yaln\u0131zca <code>top<\/code> ve <code>left<\/code> de\u011ferlerini s\u00fcrekli de\u011fi\u015ftirmek verimsiz olabilir. Modern taray\u0131c\u0131larda hareketli \u00f6\u011feler i\u00e7in \u00e7o\u011fu zaman <code>transform: translate()<\/code> kullanmak daha ak\u0131c\u0131 sonu\u00e7 verir.<\/p>\n<pre><code>&lt;div id=\"ball\"&gt;Demo&lt;\/div&gt;\n\n&lt;style&gt;\n#ball {\n  position: fixed;\n  top: 0;\n  left: 40px;\n  padding: 12px;\n  background: #222;\n  color: white;\n}\n&lt;\/style&gt;\n\n&lt;script&gt;\nconst ball = document.querySelector('#ball');\nlet y = 0;\nlet speed = 0;\nconst floor = window.innerHeight - 60;\n\nfunction animate() {\n  speed += 0.5;\n  y += speed;\n\n  if (y &gt; floor) {\n    y = floor;\n    speed *= -0.4;\n  }\n\n  ball.style.transform = `translateY(${y}px)`;\n  requestAnimationFrame(animate);\n}\n\nanimate();\n&lt;\/script&gt;<\/code><\/pre>\n<p>Bu kod yaln\u0131zca a\u00e7\u0131klama amac\u0131yla verilmi\u015f k\u00fc\u00e7\u00fck bir demodur. Blog altyap\u0131n\u0131zda do\u011frudan kullanmadan \u00f6nce i\u00e7erik g\u00fcvenli\u011fi politikas\u0131n\u0131, mobil davran\u0131\u015f\u0131 ve performans\u0131 test edin. \u00d6zellikle kullan\u0131c\u0131 girdisini DOM&#8217;a ekleyen kodlarda ka\u00e7\u0131\u015flama yap\u0131lmazsa e\u011flenceli bir efekt, gereksiz bir XSS a\u00e7\u0131\u011f\u0131na d\u00f6n\u00fc\u015febilir.<\/p>\n<p>Hosting \u015firketinde \u00e7al\u0131\u015f\u0131rken staging sand\u0131\u011f\u0131m bir makinede nginx yap\u0131land\u0131rmas\u0131n\u0131 de\u011fi\u015ftirmi\u015ftim. De\u011fi\u015fiklik k\u00fc\u00e7\u00fck g\u00f6r\u00fcn\u00fcyordu; bir proxy kural\u0131n\u0131n yerini d\u00fczenlemi\u015ftim. Fakat makine production \u00e7\u0131kt\u0131 ve birka\u00e7 dakika boyunca beklenmeyen y\u00f6nlendirmeler g\u00f6rd\u00fck. O g\u00fcn k\u0131rm\u0131z\u0131 production prompt kullanmaya ba\u015flad\u0131m. Taray\u0131c\u0131 demolar\u0131nda da ayn\u0131 disiplin ge\u00e7erli: de\u011fi\u015fiklik yapmadan \u00f6nce hangi dosyay\u0131, hangi ortamda ve hangi s\u00fcr\u00fcmle test etti\u011finizi kontrol edin.<\/p>\n<h3>DOM \u00f6\u011felerini hareket ettirmenin \u00fc\u00e7 yolu<\/h3>\n<table>\n<thead>\n<tr>\n<th>Y\u00f6ntem<\/th>\n<th>Avantaj\u0131<\/th>\n<th>Dikkat edilmesi gereken<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code>top<\/code> ve <code>left<\/code><\/td>\n<td>Anla\u015f\u0131lmas\u0131 kolayd\u0131r<\/td>\n<td>Yerle\u015fim hesaplar\u0131n\u0131 daha s\u0131k tetikleyebilir<\/td>\n<\/tr>\n<tr>\n<td><code>transform<\/code><\/td>\n<td>Animasyonlarda genellikle daha ak\u0131c\u0131d\u0131r<\/td>\n<td>Ger\u00e7ek DOM konumu ile g\u00f6rsel konum kar\u0131\u015fabilir<\/td>\n<\/tr>\n<tr>\n<td>Canvas<\/td>\n<td>\u00c7ok say\u0131da nesneyi tek y\u00fczeyde y\u00f6netebilir<\/td>\n<td>Eri\u015filebilirlik ve metin se\u00e7imi ayr\u0131ca ele al\u0131n\u0131r<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Az say\u0131da nesne i\u00e7in DOM yakla\u015f\u0131m\u0131 yeterlidir. Y\u00fczlerce par\u00e7ac\u0131k, karma\u015f\u0131k \u00e7arp\u0131\u015fma veya s\u00fcrekli d\u00f6nen \u015fekiller eklenirse Canvas ya da bir fizik k\u00fct\u00fcphanesi daha uygun hale gelebilir. K\u00fc\u00e7\u00fck bir aray\u00fcz \u015fakas\u0131 i\u00e7in a\u011f\u0131r bir ba\u011f\u0131ml\u0131l\u0131k eklemek ise bak\u0131m maliyeti yarat\u0131r.<\/p>\n<h2 id=\"google-gravity-ile-benzer-web-deneyleri-arasindaki-fark-nedir\">Google Gravity ile benzer web deneyleri aras\u0131ndaki fark nedir?<\/h2>\n<p>Google Gravity, belirli aray\u00fcz \u00f6\u011felerini yer\u00e7ekimi etkisiyle d\u00fc\u015f\u00fcren bir deneydir. Google&#8217;\u0131n di\u011fer e\u011flenceli arama s\u00fcrprizleri farkl\u0131 davran\u0131\u015flara sahip olabilir. \u00d6rne\u011fin bir sayfa d\u00f6nebilir, aray\u00fcz e\u011filebilir veya arama sonu\u00e7lar\u0131 farkl\u0131 bir animasyonla g\u00f6sterilebilir. Hepsinin ortak noktas\u0131, normal bir web aray\u00fcz\u00fcn\u00fc k\u0131sa s\u00fcreli\u011fine etkile\u015fimli bir oyunca\u011fa \u00e7evirmeleridir.<\/p>\n<table>\n<thead>\n<tr>\n<th>Deney t\u00fcr\u00fc<\/th>\n<th>Temel g\u00f6rsel davran\u0131\u015f<\/th>\n<th>Kullan\u0131lan teknik fikir<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Gravity<\/td>\n<td>\u00d6\u011feler a\u015fa\u011f\u0131 d\u00fc\u015fer ve s\u00fcr\u00fcklenir<\/td>\n<td>Animasyon, h\u0131z ve \u00e7arp\u0131\u015fma<\/td>\n<\/tr>\n<tr>\n<td>Yer\u00e7ekimsiz aray\u00fcz<\/td>\n<td>\u00d6\u011feler bo\u015flukta s\u00fcz\u00fcl\u00fcr<\/td>\n<td>H\u0131z vekt\u00f6r\u00fc ve s\u0131n\u0131r kontrol\u00fc<\/td>\n<\/tr>\n<tr>\n<td>Canvas par\u00e7ac\u0131k efekti<\/td>\n<td>Noktalar ve \u015fekiller hareket eder<\/td>\n<td>Canvas \u00e7izimi ve par\u00e7ac\u0131k d\u00f6ng\u00fcs\u00fc<\/td>\n<\/tr>\n<tr>\n<td>CSS animasyonu<\/td>\n<td>\u00d6nceden tan\u0131ml\u0131 hareket oynat\u0131l\u0131r<\/td>\n<td><code>@keyframes<\/code> ve zamanlama<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>Bu ayr\u0131m arama niyeti a\u00e7\u0131s\u0131ndan da i\u015f g\u00f6r\u00fcr. <code>Google Gravity nedir<\/code> diye arayan ki\u015fi \u00e7o\u011funlukla belirli bir d\u00fc\u015fme efektini sorar; <code>Google easter egg<\/code> aramas\u0131 ise daha geni\u015f bir alan\u0131 kapsar. Ayn\u0131 ifadeleri birbirinin yerine kullanmak, ziyaret\u00e7inin arad\u0131\u011f\u0131 deneyimi bulmas\u0131n\u0131 zorla\u015ft\u0131r\u0131r.<\/p>\n<h2 id=\"bu-tur-sayfalar-guvenli-mi\">Bu t\u00fcr sayfalar g\u00fcvenli mi?<\/h2>\n<p>Efektin kendisi genellikle basit istemci taraf\u0131 JavaScript&#8217;ten olu\u015fur. Sayfan\u0131n g\u00fcvenli\u011fini yaln\u0131zca animasyonun masum g\u00f6r\u00fcnmesine bakarak de\u011ferlendirmeyin. Kopya siteler reklam betikleri, bildirim izni talepleri veya \u015f\u00fcpheli indirme ba\u011flant\u0131lar\u0131 ekleyebilir.<\/p>\n<ul>\n<li>Adres \u00e7ubu\u011fundaki alan ad\u0131n\u0131 kontrol edin.<\/li>\n<li>Taray\u0131c\u0131 bildirim izni isteyen sayfalara temkinli yakla\u015f\u0131n.<\/li>\n<li>Bir eklenti veya \u00e7al\u0131\u015ft\u0131r\u0131labilir dosya indirmeniz istenirse sayfay\u0131 kapat\u0131n.<\/li>\n<li>\u015eifre, kart bilgisi veya Google hesab\u0131 giri\u015f bilgisi girmeyin.<\/li>\n<li>Kayna\u011f\u0131 belli olmayan kopyalar\u0131 i\u015f veya m\u00fc\u015fteri cihaz\u0131nda a\u00e7may\u0131n.<\/li>\n<\/ul>\n<p>Sayfan\u0131n kaynak kodunu incelemek istiyorsan\u0131z bunu izole bir taray\u0131c\u0131 profiliyle yapmak iyi bir al\u0131\u015fkanl\u0131kt\u0131r. Sunucuda \u00e7al\u0131\u015fan bir VPS&#8217;e bu t\u00fcr betikleri indirip \u00e7al\u0131\u015ft\u0131rman\u0131n ise hi\u00e7bir anlam\u0131 yoktur. Taray\u0131c\u0131 efekti i\u00e7in Linux shell a\u00e7mak, tornavidayla kahve kar\u0131\u015ft\u0131rmaya benzer.<\/p>\n<p>Performans taraf\u0131nda da k\u00fc\u00e7\u00fck bir not var. \u00c7ok say\u0131da DOM \u00f6\u011fesini her karede yeniden d\u00fczenlemek i\u015flemci kullan\u0131m\u0131n\u0131 art\u0131rabilir. \u00d6zellikle eski telefonlarda animasyon tak\u0131labilir. <a href=\"https:\/\/www.vps.tc\/blog\/tr\/cms-performans-ve-hiz-ayarlari-wordpress-joomla-drupal\/\">CMS Performans ve H\u0131z Ayarlar\u0131: WordPress, Joomla, Drupal<\/a> yaz\u0131s\u0131nda anlat\u0131lan genel istemci performans\u0131 yakla\u015f\u0131m\u0131 burada da ge\u00e7erli: \u00f6nce ger\u00e7ek darbo\u011faz\u0131 \u00f6l\u00e7\u00fcn, sonra optimizasyon yap\u0131n.<\/p>\n<h2 id=\"google-gravity-neden-calismiyor\">Google Gravity neden \u00e7al\u0131\u015fm\u0131yor?<\/h2>\n<p>Deneyin a\u00e7\u0131lmamas\u0131 veya nesnelerin d\u00fc\u015fmemesi birka\u00e7 farkl\u0131 nedene dayanabilir. En yayg\u0131n sorun, orijinal sayfan\u0131n art\u0131k ayn\u0131 adreste bulunmamas\u0131 ya da kopya s\u00fcr\u00fcm\u00fcn eski JavaScript kullanmas\u0131d\u0131r.<\/p>\n<ul>\n<li><strong>JavaScript kapal\u0131d\u0131r:<\/strong> Animasyon kodu \u00e7al\u0131\u015fmayaca\u011f\u0131 i\u00e7in sayfa sabit kal\u0131r.<\/li>\n<li><strong>Dosya y\u00fcklenmemi\u015ftir:<\/strong> A\u011f sekmesinde 404 veya 403 yan\u0131tlar\u0131 g\u00f6r\u00fclebilir.<\/li>\n<li><strong>Taray\u0131c\u0131 uyumsuzdur:<\/strong> Eski kodlar g\u00fcncel API davran\u0131\u015flar\u0131yla \u00e7ak\u0131\u015fabilir.<\/li>\n<li><strong>Mobil olaylar\u0131 eksiktir:<\/strong> S\u00fcr\u00fcm yaln\u0131zca <code>mousedown<\/code> ve <code>mousemove<\/code> dinliyor olabilir.<\/li>\n<li><strong>\u0130\u00e7erik engellenmi\u015ftir:<\/strong> Reklam engelleyici veya g\u00fcvenlik eklentisi bir kayna\u011f\u0131 kesebilir.<\/li>\n<\/ul>\n<p>Kontrol i\u00e7in geli\u015ftirici ara\u00e7lar\u0131n\u0131 a\u00e7\u0131p Console ve Network sekmelerine bak\u0131n. \u0130lk g\u00f6rd\u00fc\u011f\u00fcn\u00fcz hatay\u0131 arama motoruna yap\u0131\u015ft\u0131rmadan \u00f6nce dosya yolunu, HTTP durum kodunu ve hatan\u0131n hangi sat\u0131rda olu\u015ftu\u011funu inceleyin. Vardiyada s\u0131k g\u00f6rd\u00fc\u011f\u00fcm bir al\u0131\u015fkanl\u0131k burada da ge\u00e7erli: logu okumadan yeniden ba\u015flatmak nas\u0131l k\u00f6t\u00fc bir sunucu \u00e7\u00f6z\u00fcm\u00fcyse, konsola bakmadan taray\u0131c\u0131 de\u011fi\u015ftirmek de ayn\u0131 refleksin k\u00fc\u00e7\u00fck versiyonudur.<\/p>\n<h2 id=\"google-gravity-gercek-bir-google-ozelligi-mi\">Google Gravity ger\u00e7ek bir Google \u00f6zelli\u011fi mi?<\/h2>\n<p>Hay\u0131r. Google Gravity, Google arama motorunun temel i\u015flevlerinden biri de\u011fildir. Google ad\u0131 ve ana sayfa g\u00f6rseli kullan\u0131ld\u0131\u011f\u0131 i\u00e7in resmi bir \u00fcr\u00fcn izlenimi verebilir; fakat deney, taray\u0131c\u0131da \u00e7al\u0131\u015fan ba\u011f\u0131ms\u0131z HTML, CSS ve JavaScript koduna dayan\u0131r.<\/p>\n<p>Bu nedenle arama sonu\u00e7lar\u0131nda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz bir sayfan\u0131n Google taraf\u0131ndan i\u015fletildi\u011fini varsaymay\u0131n. Alan ad\u0131, sertifika, sayfan\u0131n istedi\u011fi izinler ve y\u00fckledi\u011fi \u00fc\u00e7\u00fcnc\u00fc taraf kaynaklar birlikte incelenmeli. Sertifika bulunmas\u0131 da tek ba\u015f\u0131na sayfan\u0131n Google&#8217;a ait oldu\u011funu kan\u0131tlamaz; HTTPS yaln\u0131zca ba\u011flant\u0131n\u0131n \u015fifreli oldu\u011funu g\u00f6sterir.<\/p>\n<h2 id=\"sik-sorulan-sorular\">S\u0131k Sorulan Sorular<\/h2>\n<h3>Google Gravity nedir, vir\u00fcs m\u00fc?<\/h3>\n<p>Google Gravity, web sayfas\u0131 \u00f6\u011felerini d\u00fc\u015f\u00fcyormu\u015f gibi g\u00f6steren bir JavaScript deneyidir; tek ba\u015f\u0131na vir\u00fcs de\u011fildir. Yine de ayn\u0131 ad\u0131 kullanan kopya siteler zararl\u0131 reklam veya bildirim betikleri i\u00e7erebilir, bu y\u00fczden a\u00e7t\u0131\u011f\u0131n\u0131z adresi kontrol etmelisiniz.<\/p>\n<h3>Google Gravity telefonda \u00e7al\u0131\u015f\u0131r m\u0131?<\/h3>\n<p>Kullan\u0131lan s\u00fcr\u00fcm dokunmatik olaylar\u0131 destekliyorsa telefonda da \u00e7al\u0131\u015fabilir. Baz\u0131 eski kopyalar yaln\u0131zca fare olaylar\u0131n\u0131 dinledi\u011fi i\u00e7in mobil cihazda nesneleri s\u00fcr\u00fckleyemeyebilirsiniz.<\/p>\n<h3>Google Gravity nas\u0131l yap\u0131l\u0131r?<\/h3>\n<p>HTML \u00f6\u011felerini JavaScript ile se\u00e7ip her animasyon karesinde konum, h\u0131z ve d\u00f6n\u00fc\u015f de\u011ferlerini g\u00fcncelleyerek yap\u0131labilir. Basit bir s\u00fcr\u00fcmde <code>requestAnimationFrame()<\/code>, CSS <code>transform<\/code> ve ekran alt s\u0131n\u0131r\u0131 kontrol\u00fc yeterlidir.<\/p>\n<h3>Google Gravity resmi Google sayfas\u0131 m\u0131?<\/h3>\n<p>Hay\u0131r, Google Gravity resmi arama \u00f6zelli\u011fi de\u011fil, Google ana sayfas\u0131n\u0131 taklit eden bir web deneyidir. Kopya sayfalarda ki\u015fisel bilgi girmemek ve dosya indirmemek gerekir.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Google Gravity, Google ana sayfas\u0131ndaki \u00f6\u011felerin yer\u00e7ekimi varm\u0131\u015f gibi d\u00fc\u015fmesini sa\u011flayan JavaScript tabanl\u0131 bir web deneyidir. DOM, CSS ve animasyon d\u00f6ng\u00fcs\u00fcn\u00fcn nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 inceleyin.<\/p>\n","protected":false},"author":2,"featured_media":513,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[279],"tags":[],"class_list":["post-515","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-nedir"],"lang":"tr","translations":{"tr":515,"en":516},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/515","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/comments?post=515"}],"version-history":[{"count":1,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions"}],"predecessor-version":[{"id":517,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/posts\/515\/revisions\/517"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/media\/513"}],"wp:attachment":[{"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/media?parent=515"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/categories?post=515"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vps.tc\/blog\/wp-json\/wp\/v2\/tags?post=515"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}