Z\u0131playan Y\u00fckleyici<\/title>\n <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n <div class=\"page-loader\">\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <\/div>\n\n \n <main style=\"padding: 20px; text-align: center;\">\n \n Bu, sayfa i\u00e7eri\u011finizin bir b\u00f6l\u00fcm\u00fcd\u00fcr. Y\u00fckleyici kaybolduktan sonra g\u00f6r\u00fcnecek.<\/p>\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eaque.<\/p>\n \n <\/main>\n\n <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\nBurada <code>page-loader<\/code> s\u0131n\u0131f\u0131na sahip bir <code>div<\/code> olu\u015fturduk ve i\u00e7ine \u00fc\u00e7 adet <code>dot<\/code> s\u0131n\u0131f\u0131na sahip <code>div<\/code> yerle\u015ftirdik. Bu <code>dot<\/code> elemanlar\u0131 bizim animasyonlu noktalar\u0131m\u0131z olacak.<\/p>\n#### Temel CSS Stilleri<\/p>\n\u015eimdi bu HTML yap\u0131s\u0131na biraz stil vererek noktalar\u0131m\u0131z\u0131 g\u00f6r\u00fcn\u00fcr hale getirelim ve ana kapsay\u0131c\u0131y\u0131 sayfan\u0131n ortas\u0131na sabitleyelim. <code>style.css<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-css\">\/ style.css <\/em>\/\n\nbody {\n margin: 0;\n font-family: Arial, sans-serif;\n overflow: hidden; \/ Y\u00fckleyici aktifken sayfan\u0131n kaymas\u0131n\u0131 engelle <\/em>\/\n}\n\n.page-loader {\n position: fixed; \/ Sayfada sabit kalmas\u0131n\u0131 sa\u011flar <\/em>\/\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(255, 255, 255, 0.95); \/ Hafif \u015feffaf beyaz arka plan <\/em>\/\n display: flex; \/ Noktalar\u0131 hizalamak i\u00e7in flexbox kullan <\/em>\/\n justify-content: center; \/ Yatayda ortala <\/em>\/\n align-items: center; \/ Dikeyde ortala <\/em>\/\n z-index: 9999; \/ Di\u011fer t\u00fcm elemanlar\u0131n \u00fczerinde olmas\u0131n\u0131 sa\u011flar <\/em>\/\n visibility: visible; \/ Ba\u015flang\u0131\u00e7ta g\u00f6r\u00fcn\u00fcr <\/em>\/\n opacity: 1; \/ Ba\u015flang\u0131\u00e7ta tam opakl\u0131k <\/em>\/\n transition: visibility 0.5s, opacity 0.5s ease-out; \/ Gizleme\/g\u00f6sterme i\u00e7in ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.page-loader.hidden {\n visibility: hidden;\n opacity: 0;\n}\n\n.dot {\n width: 15px; \/ Noktan\u0131n geni\u015fli\u011fi <\/em>\/\n height: 15px; \/ Noktan\u0131n y\u00fcksekli\u011fi <\/em>\/\n margin: 0 8px; \/ Noktalar aras\u0131nda bo\u015fluk <\/em>\/\n background-color: #3498db; \/ Noktan\u0131n rengi (mavi) <\/em>\/\n border-radius: 50%; \/ Dairesel \u015fekil vermek i\u00e7in <\/em>\/\n display: inline-block; \/ Yan yana durmalar\u0131n\u0131 sa\u011flar <\/em>\/\n}<\/code><\/pre>\nBu CSS kodunda: \n* <code>body<\/code> i\u00e7in <code>overflow: hidden<\/code> kullanarak y\u00fckleyici aktifken sayfan\u0131n kayd\u0131r\u0131lmas\u0131n\u0131 engelledik. \n* <code>.page-loader<\/code> eleman\u0131n\u0131 <code>position: fixed<\/code> ile ekran\u0131n tamam\u0131n\u0131 kaplayacak \u015fekilde sabitledik ve <code>z-index<\/code> ile di\u011fer t\u00fcm i\u00e7eriklerin \u00fczerinde olmas\u0131n\u0131 sa\u011flad\u0131k. <code>display: flex<\/code> ile i\u00e7indeki noktalar\u0131 kolayca ortalad\u0131k. \n* <code>.dot<\/code> elemanlar\u0131na geni\u015flik, y\u00fckseklik, renk ve <code>border-radius: 50%<\/code> vererek onlar\u0131 dairesel hale getirdik. <code>margin<\/code> ile aralar\u0131nda bo\u015fluk b\u0131rakt\u0131k. \n* <code>page-loader.hidden<\/code> s\u0131n\u0131f\u0131, y\u00fckleyiciyi gizlemek i\u00e7in kullan\u0131lacak ve <code>transition<\/code> \u00f6zelli\u011fi ile bu gizleme i\u015fleminin yumu\u015fak bir \u015fekilde ger\u00e7ekle\u015fmesini sa\u011flayaca\u011f\u0131z.<\/p>\n### Animasyonlar\u0131 Olu\u015fturma: Keyframes ve Zamanlama<\/p>\n\u015eimdi y\u00fckleyicimize hayat verecek k\u0131sma geldik: CSS3 <code>@keyframes<\/code> kurallar\u0131 ile animasyonumuzu tan\u0131mlayaca\u011f\u0131z. Amac\u0131m\u0131z, her bir noktan\u0131n yukar\u0131 ve a\u015fa\u011f\u0131 z\u0131plamas\u0131n\u0131 sa\u011flamak ve bunu farkl\u0131 zamanlamalarla yaparak ak\u0131c\u0131 bir ard\u0131\u015f\u0131k efekt elde etmek.<\/p>\n#### Bounce Animasyonu<\/p>\nTek bir noktan\u0131n z\u0131plama hareketini tan\u0131mlayacak bir <code>@keyframes<\/code> kural\u0131 olu\u015ftural\u0131m. Bu animasyon, noktan\u0131n dikey konumunu (<code>transform: translateY()<\/code>) de\u011fi\u015ftirecek.<\/p>\n<pre><code class=\"language-css\">\/ style.css i\u00e7ine ekleyin <\/em>\/\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(0); \/ Ba\u015flang\u0131\u00e7 ve biti\u015f konumunda normal seviye <\/em>\/\n }\n 50% {\n transform: translateY(-15px); \/ Ortada yukar\u0131 do\u011fru z\u0131pla <\/em>\/\n }\n}<\/code><\/pre>\nBu <code>bounce<\/code> anahtar kareleri \u015fu anlama geliyor: \n* <code>0%<\/code> (animasyonun ba\u015flang\u0131c\u0131) ve <code>100%<\/code> (animasyonun sonu) noktas\u0131 normal konumunda (<code>translateY(0)<\/code>). \n* <code>50%<\/code> (animasyonun ortas\u0131) noktas\u0131 15 piksel yukar\u0131 z\u0131plam\u0131\u015f (<code>translateY(-15px)<\/code>).<\/p>\n\u015eimdi bu animasyonu <code>.dot<\/code> elemanlar\u0131m\u0131za uygulayal\u0131m:<\/p>\n<pre><code class=\"language-css\">\/ style.css i\u00e7indeki .dot tan\u0131m\u0131na ekleyin <\/em>\/\n\n.dot {\n \/ ... \u00f6nceki stiller ... <\/em>\/\n animation: bounce 0.6s ease-in-out infinite; \/ Animasyonu uygula <\/em>\/\n}<\/code><\/pre>\nBurada <code>animation<\/code> k\u0131salt\u0131lm\u0131\u015f \u00f6zelli\u011fini kulland\u0131k: \n* <code>bounce<\/code>: Uygulanacak <code>@keyframes<\/code> ad\u0131. \n* <code>0.6s<\/code>: Animasyonun tek bir d\u00f6ng\u00fcs\u00fcn\u00fcn s\u00fcresi (0.6 saniye). \n* <code>ease-in-out<\/code>: Animasyonun h\u0131z e\u011frisi. Ba\u015fta yava\u015f ba\u015flar, ortada h\u0131zlan\u0131r ve sonda tekrar yava\u015flar, bu da daha do\u011fal bir z\u0131plama hissi verir. \n* <code>infinite<\/code>: Animasyonun sonsuz kez tekrar etmesini sa\u011flar.<\/p>\n\u015eu anda t\u00fcm noktalar ayn\u0131 anda z\u0131playacakt\u0131r. Bu da istedi\u011fimiz ard\u0131\u015f\u0131k z\u0131plama efekti yerine senkronize bir hareket yarat\u0131r.<\/p>\n#### Gecikme ile Senkronizasyon<\/p>\nArd\u0131\u015f\u0131k z\u0131plama efektini elde etmek i\u00e7in her bir noktaya farkl\u0131 bir <code>animation-delay<\/code> (animasyon gecikmesi) uygulamam\u0131z gerekiyor. Bu, animasyonun her nokta i\u00e7in biraz farkl\u0131 zamanlarda ba\u015flamas\u0131n\u0131 sa\u011flayacak.<\/p>\n<pre><code class=\"language-css\">\/ style.css i\u00e7ine ekleyin <\/em>\/\n\n.dot:nth-child(1) {\n animation-delay: 0s; \/ \u0130lk nokta hemen ba\u015flar <\/em>\/\n}\n\n.dot:nth-child(2) {\n animation-delay: 0.1s; \/ \u0130kinci nokta 0.1 saniye sonra ba\u015flar <\/em>\/\n}\n\n.dot:nth-child(3) {\n animation-delay: 0.2s; \/ \u00dc\u00e7\u00fcnc\u00fc nokta 0.2 saniye sonra ba\u015flar <\/em>\/\n}\n\n\/ Dilerseniz 4. nokta i\u00e7in de ekleyebilirsiniz <\/em>\/\n\/*\n.dot:nth-child(4) {\n animation-delay: 0.3s;\n}\n*\/<\/code><\/pre>\nBu kod par\u00e7as\u0131, her bir <code>.dot<\/code> eleman\u0131na, s\u0131ras\u0131na g\u00f6re artan bir gecikme s\u00fcresi atar. B\u00f6ylece ilk nokta hemen z\u0131plamaya ba\u015flarken, ikincisi biraz bekler, \u00fc\u00e7\u00fcnc\u00fcs\u00fc biraz daha bekler. Bu k\u00fc\u00e7\u00fck gecikmeler, noktalar\u0131n bir dalga efektiyle ard\u0131\u015f\u0131k olarak z\u0131plamas\u0131n\u0131 sa\u011flayarak “z\u0131playan top” hissiyat\u0131n\u0131 yarat\u0131r. <code>animation-delay<\/code> de\u011ferlerini <code>animation-duration<\/code> ile orant\u0131l\u0131 olarak ayarlamak, animasyonun ak\u0131c\u0131l\u0131\u011f\u0131 i\u00e7in \u00f6nemlidir. \u00d6rne\u011fin, 0.6 saniyelik bir animasyon i\u00e7in 0.1 saniyelik gecikmeler olduk\u00e7a uygundur.<\/p>\n#### Animasyonun P\u00fcr\u00fczs\u00fczle\u015ftirilmesi<\/p>\n<code>ease-in-out<\/code> zamanlama fonksiyonu genellikle \u00e7o\u011fu z\u0131plama efekti i\u00e7in yeterince iyidir. Ancak daha \u00f6zel bir his istiyorsan\u0131z, <code>cubic-bezier()<\/code> fonksiyonunu kullanarak kendi \u00f6zel zamanlama e\u011frinizi tan\u0131mlayabilirsiniz. \u00d6rne\u011fin: <code>animation-timing-function: cubic-bezier(.28,.84,.42,1);<\/code> gibi de\u011ferler, daha yayl\u0131 bir etki yaratabilir.<\/p>\nAyr\u0131ca, <code>animation-fill-mode: both<\/code> \u00f6zelli\u011fi, animasyonun ba\u015flamadan \u00f6nceki ve bittikten sonraki durumunu kontrol eder. Biz <code>infinite<\/code> kulland\u0131\u011f\u0131m\u0131z i\u00e7in bu genelde \u00e7ok kritik de\u011fil, ancak animasyonun biti\u015f durumunu korumak istedi\u011finiz tek d\u00f6ng\u00fcl\u00fc animasyonlarda faydal\u0131d\u0131r.<\/p>\n### Y\u00fckleyiciyi Sayfaya Entegre Etme ve Geli\u015ftirmeler<\/p>\nY\u00fckleyicimiz art\u0131k hareket ediyor! \u015eimdi onu ger\u00e7ek bir web sayfas\u0131na entegre etme ve baz\u0131 pratik geli\u015ftirmeler ekleme zaman\u0131.<\/p>\n#### JavaScript ile Kontrol<\/p>\nBir sayfa y\u00fckleyicisi, sayfa tamamen y\u00fcklendi\u011finde veya belirli bir i\u015flem tamamland\u0131\u011f\u0131nda ortadan kaybolmal\u0131d\u0131r. Bunu genellikle JavaScript ile kontrol ederiz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ script.js\ndocument.addEventListener('DOMContentLoaded', function() {\n \/\/ DOM tamamen y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r (resimler, CSS vb. beklenmez)\n console.log(\"DOM i\u00e7eri\u011fi y\u00fcklendi.\");\n\n \/\/ Y\u00fckleyiciyi biraz gecikmeyle gizle, b\u00f6ylece kullan\u0131c\u0131 animasyonu g\u00f6rebilir\n setTimeout(function() {\n const pageLoader = document.querySelector('.page-loader');\n if (pageLoader) {\n pageLoader.classList.add('hidden');\n \/\/ Animasyon bittikten sonra loader'\u0131 DOM'dan tamamen kald\u0131rabiliriz\n pageLoader.addEventListener('transitionend', function() {\n pageLoader.style.display = 'none';\n document.body.style.overflow = ''; \/\/ Sayfa kayd\u0131rmay\u0131 tekrar etkinle\u015ftir\n }, { once: true }); \/\/ Olay dinleyicisini bir kez \u00e7al\u0131\u015ft\u0131r\n }\n }, 1000); \/\/ 1 saniye sonra gizle (animasyonu g\u00f6stermek i\u00e7in)\n});\n\n\/\/ window.onload, t\u00fcm kaynaklar (resimler, videolar vb.) y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r\nwindow.onload = function() {\n console.log(\"T\u00fcm sayfa kaynaklar\u0131 y\u00fcklendi.\");\n \/\/ E\u011fer loader'\u0131 sadece t\u00fcm kaynaklar y\u00fcklendi\u011finde gizlemek isterseniz, yukar\u0131daki setTimeout'u buraya ta\u015f\u0131yabilirsiniz.\n \/\/ Ancak DOMContentLoaded genellikle daha erken tetiklendi\u011fi i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sunar.\n};<\/code><\/pre>\nBu JavaScript kodu: \n1. <code>DOMContentLoaded<\/code> olay\u0131n\u0131 dinler. Bu olay, HTML belgesi tamamen y\u00fcklendi\u011finde ve ayr\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenir, ancak CSS, resimler gibi d\u0131\u015f kaynaklar\u0131n y\u00fcklenmesini beklemez. Bu genellikle bir y\u00fckleyiciyi gizlemek i\u00e7in iyi bir zamand\u0131r. \n2. <code>setTimeout<\/code> kullanarak y\u00fckleyicinin en az 1 saniye g\u00f6r\u00fcn\u00fcr kalmas\u0131n\u0131 sa\u011flar\u0131z. Bu, kullan\u0131c\u0131n\u0131n animasyonu fark etmesi i\u00e7in yeterli s\u00fcreyi tan\u0131r. \n3. <code>page-loader<\/code> eleman\u0131na <code>hidden<\/code> s\u0131n\u0131f\u0131n\u0131 ekleriz. Bu s\u0131n\u0131f, CSS’imizdeki <code>transition<\/code> \u00f6zelli\u011fi sayesinde y\u00fckleyiciyi yava\u015f\u00e7a opakl\u0131\u011f\u0131n\u0131 azaltarak gizler. \n4. <code>transitionend<\/code> olay\u0131 dinleyicisi ile gizleme animasyonu tamamland\u0131\u011f\u0131nda, <code>display: none<\/code> yaparak y\u00fckleyiciyi DOM’dan tamamen kald\u0131r\u0131r\u0131z (veya sadece g\u00f6r\u00fcnmez yapar\u0131z) ve <code>body<\/code> \u00fczerindeki <code>overflow: hidden<\/code> stilini kald\u0131rarak sayfan\u0131n kayd\u0131r\u0131labilirli\u011fini geri getiririz. <code>once: true<\/code> se\u00e7ene\u011fi ile bu dinleyicinin sadece bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\u0131z.<\/p>\n#### Eri\u015filebilirlik ve Semantik<\/p>\nY\u00fckleyiciler g\u00f6rsel olarak etkili olsa da, ekran okuyucu kullanan ki\u015filer i\u00e7in anlams\u0131z kalabilirler. Eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in baz\u0131 ad\u0131mlar atabiliriz:<\/p>\n* <code>aria-live=\"polite\"<\/code>:<\/strong> Y\u00fckleyici kapsay\u0131c\u0131s\u0131na bu \u00f6zelli\u011fi eklemek, ekran okuyucular\u0131na bu alandaki de\u011fi\u015fikliklerin kullan\u0131c\u0131ya nazik\u00e7e bildirilmesi gerekti\u011fini s\u00f6yler. \n* <code>role=\"status\"<\/code>:<\/strong> Benzer \u015fekilde, bu rol de eleman\u0131n bir durum mesaj\u0131 i\u00e7erdi\u011fini belirtir. \n* G\u00f6rsel Olarak Gizlenmi\u015f Metin:<\/strong> <code>sr-only<\/code> (screen reader only) gibi bir s\u0131n\u0131fla sadece ekran okuyuculara y\u00f6nelik “Y\u00fckleniyor…” gibi bir metin eklemek, durumu netle\u015ftirir.<\/p>\n<pre><code class=\"language-html\"><div class=\"page-loader\" role=\"status\" aria-live=\"polite\">\n Sayfa Y\u00fckleniyor...<\/span>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n <div class=\"dot\"><\/div>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">\/ style.css i\u00e7ine ekleyin <\/em>\/\n.sr-only {\n position: absolute;\n width: 1px;\n height: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n white-space: nowrap;\n border-width: 0;\n}<\/code><\/pre>\nBu, ekran okuyucular\u0131n “Sayfa Y\u00fckleniyor…” mesaj\u0131n\u0131 okumas\u0131n\u0131 sa\u011flar ve g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in de deneyimi iyile\u015ftirir.<\/p>\n#### Tasar\u0131m Geli\u015ftirmeleri<\/p>\nBu temel z\u0131playan y\u00fckleyiciyi bir\u00e7ok farkl\u0131 \u015fekilde \u00f6zelle\u015ftirebilirsiniz:<\/p>\n* Renkler ve Boyutlar:<\/strong> <code>.dot<\/code> rengini, boyutunu veya <code>.page-loader<\/code> arka plan rengini de\u011fi\u015ftirerek markan\u0131za uygun hale getirebilirsiniz. \n* Daha Fazla Nokta:<\/strong> Daha fazla <code>.dot<\/code> eleman\u0131 ekleyerek animasyonu zenginle\u015ftirebilir, her birine farkl\u0131 <code>animation-delay<\/code> atayabilirsiniz. \n* Farkl\u0131 Animasyonlar:<\/strong> <code>transform: translateY()<\/code> yerine <code>transform: scale()<\/code> kullanarak noktalar\u0131n b\u00fcy\u00fcy\u00fcp k\u00fc\u00e7\u00fclmesini sa\u011flayabilir veya <code>opacity<\/code> ile solup tekrar belirmesini sa\u011flayabilirsiniz. \n* Loader’a Metin Ekleme:<\/strong> Noktalar\u0131n alt\u0131na “Y\u00fckleniyor…” veya \u00f6zel bir mesaj ekleyebilirsiniz. \n* Progres \u00c7ubu\u011fu:<\/strong> Animasyonlu noktalar\u0131n yan\u0131 s\u0131ra, y\u00fckleme ilerlemesini g\u00f6steren bir y\u00fczde veya \u00e7ubuk eklemek de m\u00fcmk\u00fcnd\u00fcr.<\/p>\n### Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/p>\nBu rehberde, CSS3 <code>@keyframes<\/code> ve <code>animation<\/code> \u00f6zelliklerini kullanarak nas\u0131l basit ama etkili bir z\u0131playan nokta sayfa y\u00fckleyicisi olu\u015fturaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frendik. HTML yap\u0131s\u0131ndan temel CSS stillerine, animasyon gecikmelerinden JavaScript kontrol\u00fcne ve eri\u015filebilirlik ipu\u00e7lar\u0131na kadar her ad\u0131m\u0131 detayl\u0131ca inceledik.<\/p>\nCSS3 animasyonlar\u0131, JavaScript’e k\u0131yasla genellikle daha performansl\u0131 ve taray\u0131c\u0131 taraf\u0131ndan daha iyi optimize edilmi\u015f animasyonlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu t\u00fcr y\u00fckleyiciler, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rarak beklemeyi daha az s\u0131k\u0131c\u0131 hale getirir ve sitenize profesyonel bir dokunu\u015f katar. Kendi tasar\u0131mlar\u0131n\u0131z\u0131 deneyerek ve farkl\u0131 animasyon \u00f6zelliklerini ke\u015ffederek yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rakmaktan \u00e7ekinmeyin!<\/p>\n#### S\u0131k\u00e7a Sorulan Sorular (SSS)<\/p>\nQ1: CSS animasyonlar\u0131 sayfa performans\u0131n\u0131 etkiler mi?<\/strong> \nA1:<\/strong> Genellikle hay\u0131r, aksine JavaScript tabanl\u0131 animasyonlara g\u00f6re daha performansl\u0131d\u0131rlar. Modern taray\u0131c\u0131lar CSS animasyonlar\u0131n\u0131 GPU h\u0131zland\u0131rmas\u0131yla i\u015fleyebilir, bu da CPU’ya daha az y\u00fck bindirir ve daha ak\u0131c\u0131 animasyonlar sa\u011flar. Ancak \u00e7ok karma\u015f\u0131k veya \u00e7ok fazla animasyonu ayn\u0131 anda \u00e7al\u0131\u015ft\u0131rmak performans\u0131 etkileyebilir.<\/p>\nQ2: Neden bu y\u00fckleyici i\u00e7in JavaScript yerine CSS animasyonlar\u0131 kulland\u0131k?<\/strong> \nA2:<\/strong> CSS animasyonlar\u0131, DOM manipulation (DOM manip\u00fclasyonu) gerektirmedi\u011fi ve taray\u0131c\u0131 taraf\u0131ndan do\u011frudan optimize edildi\u011fi i\u00e7in genellikle daha ak\u0131c\u0131 ve performansl\u0131d\u0131r. Basit g\u00f6rsel efektler ve durum ge\u00e7i\u015fleri i\u00e7in CSS, JavaScript’e g\u00f6re daha uygun bir se\u00e7enektir. JavaScript’i sadece animasyonun ne zaman ba\u015flay\u0131p ne zaman bitece\u011fini kontrol etmek i\u00e7in kulland\u0131k.<\/p>\nQ3: Y\u00fckleyiciyi sadece belirli bir alana (\u00f6rne\u011fin bir form g\u00f6nderimi s\u0131ras\u0131nda) nas\u0131l uygular\u0131m?<\/strong> \nA3:<\/strong> <code>.page-loader<\/code> s\u0131n\u0131f\u0131n\u0131 <code>position: fixed<\/code> yerine <code>position: absolute<\/code> olarak de\u011fi\u015ftirip, y\u00fckleyiciyi g\u00f6stermek istedi\u011finiz ana kapsay\u0131c\u0131ya (<code>position: relative<\/code> veya <code>position: absolute<\/code> verilmi\u015f olmal\u0131) yerle\u015ftirebilirsiniz. Bu \u015fekilde, y\u00fckleyici sadece o kapsay\u0131c\u0131n\u0131n i\u00e7indeki alan\u0131 kaplar.<\/p>\nQ4: Farkl\u0131 taray\u0131c\u0131larda uyumluluk nas\u0131l sa\u011flan\u0131r?<\/strong> \nA4:<\/strong> Modern CSS3 animasyon \u00f6zellikleri (<code>@keyframes<\/code>, <code>animation<\/code>) \u00e7o\u011fu g\u00fcncel taray\u0131c\u0131da standart olarak desteklenmektedir. Eski taray\u0131c\u0131lar i\u00e7in <code>webkit-<\/code>, <code>-moz-<\/code>, <code>-ms-<\/code>, <code>-o-<\/code> gibi vendor prefix’ler (taray\u0131c\u0131 \u00f6n ekleri) kullanmak gerekebilir (<code>-webkit-@keyframes<\/code>, <code>-webkit-animation<\/code>). Ancak g\u00fcn\u00fcm\u00fczde bu prefix’lere olan ihtiya\u00e7 giderek azalmaktad\u0131r. Otomatik olarak prefix ekleyen ara\u00e7lar (\u00f6rne\u011fin Autoprefixer) kullanmak iyi bir pratiktir.<\/p>\nQ5: Animasyon yava\u015f veya tak\u0131l\u0131yormu\u015f gibi g\u00f6r\u00fcn\u00fcyorsa ne yapmal\u0131y\u0131m?<\/strong> \nA5:<\/strong> \n* <code>animation-duration<\/code> de\u011ferini k\u0131saltmay\u0131 deneyin. \n* <code>animation-timing-function<\/code> olarak <code>ease-in-out<\/code> veya <code>cubic-bezier<\/code> ile farkl\u0131 de\u011ferler deneyerek daha ak\u0131c\u0131 bir ge\u00e7i\u015f bulmaya \u00e7al\u0131\u015f\u0131n. \n* <code>transform<\/code> \u00f6zellikleri d\u0131\u015f\u0131nda (\u00f6rne\u011fin <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> gibi) animasyon yapmaktan ka\u00e7\u0131n\u0131n, \u00e7\u00fcnk\u00fc <code>transform<\/code> ve <code>opacity<\/code> gibi \u00f6zellikler taray\u0131c\u0131 taraf\u0131ndan daha kolay optimize edilir. \n* Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki performans monit\u00f6r\u00fcn\u00fc kullanarak animasyonun neden yava\u015flad\u0131\u011f\u0131n\u0131 analiz edebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-31447","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create a Bouncing Page Loader with CSS3 Animations\" \/>\n<meta property=\"og:description\" content=\"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-09T23:41:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"How To Create a Bouncing Page Loader with CSS3 Animations\",\"datePublished\":\"2025-10-09T23:41:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"},\"wordCount\":1944,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\",\"name\":\"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-09T23:41:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create a Bouncing Page Loader with CSS3 Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","og_locale":"tr_TR","og_type":"article","og_title":"How To Create a Bouncing Page Loader with CSS3 Animations","og_description":"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy","og_url":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-09T23:41:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"How To Create a Bouncing Page Loader with CSS3 Animations","datePublished":"2025-10-09T23:41:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"},"wordCount":1944,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","url":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","name":"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-09T23:41:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create a Bouncing Page Loader with CSS3 Animations"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31447"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447\/revisions"}],"predecessor-version":[{"id":31448,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447\/revisions\/31448"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":31447,"date":"2025-10-10T02:41:49","date_gmt":"2025-10-09T23:41:49","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=31447"},"modified":"2025-10-10T02:41:49","modified_gmt":"2025-10-09T23:41:49","slug":"how-to-create-a-bouncing-page-loader-with-css3-animations","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","title":{"rendered":"How To Create a Bouncing Page Loader with CSS3 Animations"},"content":{"rendered":"

Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy\u00fck i\u00e7eriklerin veya arka plan i\u015flemlerinin oldu\u011fu durumlarda, kullan\u0131c\u0131ya sayfan\u0131n hala aktif oldu\u011funu g\u00f6steren g\u00f6rsel bir geri bildirim sunmak \u00e7ok \u00f6nemlidir. \u0130\u015fte bu noktada “sayfa y\u00fckleyicileri” (page loaders) devreye girer.<\/p>\n

Bu rehberde, modern web geli\u015ftirmenin vazge\u00e7ilmez ara\u00e7lar\u0131ndan biri olan CSS3 animasyonlar\u0131n\u0131 kullanarak estetik ve i\u015flevsel bir “z\u0131playan nokta” (bouncing dot) sayfa y\u00fckleyicisi olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. Kullan\u0131c\u0131lar\u0131n bekleme s\u00fcrelerini daha keyifli hale getiren bu basit ama etkili animasyonu nas\u0131l tasarlayaca\u011f\u0131n\u0131z\u0131, kodlayaca\u011f\u0131n\u0131z\u0131 ve sayfan\u0131za entegre edece\u011finizi detayl\u0131 bir \u015fekilde inceleyece\u011fiz.<\/p>\n

### Sayfa Y\u00fckleyicilerine Neden \u0130htiya\u00e7 Duyar\u0131z?<\/p>\n

Web siteleri ve uygulamalar g\u00fcn\u00fcm\u00fczde giderek daha dinamik ve i\u00e7erik a\u00e7\u0131s\u0131ndan zengin hale geliyor. Bu durum, zaman zaman sayfan\u0131n y\u00fcklenmesi veya veri \u00e7ekilmesi i\u00e7in ek s\u00fcreler gerektirebilir. Kullan\u0131c\u0131lar, bir web sayfas\u0131n\u0131n yan\u0131t vermedi\u011fini d\u00fc\u015f\u00fcnd\u00fcklerinde h\u0131zla sab\u0131rs\u0131zlanabilir ve siteyi terk edebilirler. \u0130\u015fte bu noktada bir y\u00fckleyici (loader) devreye girer:<\/p>\n

* Kullan\u0131c\u0131 Deneyimini \u0130yile\u015ftirme:<\/strong> Kullan\u0131c\u0131ya bir \u015feylerin “oldu\u011funu” g\u00f6stererek belirsizli\u011fi ortadan kald\u0131r\u0131r. Sayfan\u0131n donmad\u0131\u011f\u0131, sadece veri bekledi\u011fi izlenimini verir.
\n* Alg\u0131lanan Performans\u0131 Art\u0131rma:<\/strong> Ger\u00e7ek y\u00fckleme s\u00fcresi ayn\u0131 kalsa bile, g\u00f6rsel bir geri bildirim sunmak, kullan\u0131c\u0131lar\u0131n bekleme s\u00fcresini daha k\u0131sa alg\u0131lamas\u0131na yard\u0131mc\u0131 olabilir.
\n* Profesyonel G\u00f6r\u00fcn\u00fcm:<\/strong> \u0130yi tasarlanm\u0131\u015f bir y\u00fckleyici, web sitenizin veya uygulaman\u0131z\u0131n daha profesyonel ve modern g\u00f6r\u00fcnmesini sa\u011flar.<\/p>\n

CSS3 animasyonlar\u0131, JavaScript’e k\u0131yasla genellikle daha performansl\u0131d\u0131r \u00e7\u00fcnk\u00fc taray\u0131c\u0131lar taraf\u0131ndan do\u011frudan GPU (Grafik \u0130\u015flem Birimi) \u00fczerinden h\u0131zland\u0131r\u0131labilirler. Bu, \u00f6zellikle mobil cihazlarda ak\u0131c\u0131 animasyonlar elde etmek i\u00e7in b\u00fcy\u00fck bir avantajd\u0131r. \u015eimdi, bu z\u0131playan nokta y\u00fckleyiciyi nas\u0131l olu\u015fturaca\u011f\u0131m\u0131za ge\u00e7elim.<\/p>\n

### Temel Yap\u0131: HTML ve CSS<\/p>\n

Her \u015feyden \u00f6nce, y\u00fckleyicimiz i\u00e7in temel HTML yap\u0131s\u0131n\u0131 ve ba\u015flang\u0131\u00e7 CSS stilini olu\u015fturmam\u0131z gerekiyor. Bu b\u00f6l\u00fcmde, y\u00fckleyici noktalar\u0131m\u0131z\u0131 ve onlar\u0131 \u00e7evreleyen ana kapsay\u0131c\u0131y\u0131 nas\u0131l tan\u0131mlayaca\u011f\u0131m\u0131z\u0131 g\u00f6rece\u011fiz.<\/p>\n

#### HTML Yap\u0131s\u0131<\/p>\n

Y\u00fckleyicimiz, \u00fc\u00e7 veya d\u00f6rt k\u00fc\u00e7\u00fck noktadan olu\u015facak. Bu noktalar\u0131 bir ana kapsay\u0131c\u0131 (div<\/code>) i\u00e7ine yerle\u015ftirece\u011fiz, b\u00f6ylece onlar\u0131 kolayca ortalayabilir ve y\u00f6netebiliriz.<\/p>\n

\n\n\n    \n    \n    Z\u0131playan Y\u00fckleyici<\/title>\n    <link rel=\"stylesheet\" href=\"style.css\">\n<\/head>\n<body>\n\n    <div class=\"page-loader\">\n        <div class=\"dot\"><\/div>\n        <div class=\"dot\"><\/div>\n        <div class=\"dot\"><\/div>\n    <\/div>\n\n    <!-- Sayfa i\u00e7eri\u011finiz buraya gelecek -->\n    <main style=\"padding: 20px; text-align: center;\">\n        \n        <p>Bu, sayfa i\u00e7eri\u011finizin bir b\u00f6l\u00fcm\u00fcd\u00fcr. Y\u00fckleyici kaybolduktan sonra g\u00f6r\u00fcnecek.<\/p>\n        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas, eaque.<\/p>\n        <!-- ...daha fazla i\u00e7erik... -->\n    <\/main>\n\n    <script src=\"script.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n<p>Burada <code>page-loader<\/code> s\u0131n\u0131f\u0131na sahip bir <code>div<\/code> olu\u015fturduk ve i\u00e7ine \u00fc\u00e7 adet <code>dot<\/code> s\u0131n\u0131f\u0131na sahip <code>div<\/code> yerle\u015ftirdik. Bu <code>dot<\/code> elemanlar\u0131 bizim animasyonlu noktalar\u0131m\u0131z olacak.<\/p>\n<p>#### Temel CSS Stilleri<\/p>\n<p>\u015eimdi bu HTML yap\u0131s\u0131na biraz stil vererek noktalar\u0131m\u0131z\u0131 g\u00f6r\u00fcn\u00fcr hale getirelim ve ana kapsay\u0131c\u0131y\u0131 sayfan\u0131n ortas\u0131na sabitleyelim. <code>style.css<\/code> dosyam\u0131z\u0131 olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-css\">\/<em> style.css <\/em>\/\n\nbody {\n    margin: 0;\n    font-family: Arial, sans-serif;\n    overflow: hidden; \/<em> Y\u00fckleyici aktifken sayfan\u0131n kaymas\u0131n\u0131 engelle <\/em>\/\n}\n\n.page-loader {\n    position: fixed; \/<em> Sayfada sabit kalmas\u0131n\u0131 sa\u011flar <\/em>\/\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background-color: rgba(255, 255, 255, 0.95); \/<em> Hafif \u015feffaf beyaz arka plan <\/em>\/\n    display: flex; \/<em> Noktalar\u0131 hizalamak i\u00e7in flexbox kullan <\/em>\/\n    justify-content: center; \/<em> Yatayda ortala <\/em>\/\n    align-items: center; \/<em> Dikeyde ortala <\/em>\/\n    z-index: 9999; \/<em> Di\u011fer t\u00fcm elemanlar\u0131n \u00fczerinde olmas\u0131n\u0131 sa\u011flar <\/em>\/\n    visibility: visible; \/<em> Ba\u015flang\u0131\u00e7ta g\u00f6r\u00fcn\u00fcr <\/em>\/\n    opacity: 1; \/<em> Ba\u015flang\u0131\u00e7ta tam opakl\u0131k <\/em>\/\n    transition: visibility 0.5s, opacity 0.5s ease-out; \/<em> Gizleme\/g\u00f6sterme i\u00e7in ge\u00e7i\u015f efekti <\/em>\/\n}\n\n.page-loader.hidden {\n    visibility: hidden;\n    opacity: 0;\n}\n\n.dot {\n    width: 15px; \/<em> Noktan\u0131n geni\u015fli\u011fi <\/em>\/\n    height: 15px; \/<em> Noktan\u0131n y\u00fcksekli\u011fi <\/em>\/\n    margin: 0 8px; \/<em> Noktalar aras\u0131nda bo\u015fluk <\/em>\/\n    background-color: #3498db; \/<em> Noktan\u0131n rengi (mavi) <\/em>\/\n    border-radius: 50%; \/<em> Dairesel \u015fekil vermek i\u00e7in <\/em>\/\n    display: inline-block; \/<em> Yan yana durmalar\u0131n\u0131 sa\u011flar <\/em>\/\n}<\/code><\/pre>\n<p>Bu CSS kodunda:<br \/>\n*   <code>body<\/code> i\u00e7in <code>overflow: hidden<\/code> kullanarak y\u00fckleyici aktifken sayfan\u0131n kayd\u0131r\u0131lmas\u0131n\u0131 engelledik.<br \/>\n*   <code>.page-loader<\/code> eleman\u0131n\u0131 <code>position: fixed<\/code> ile ekran\u0131n tamam\u0131n\u0131 kaplayacak \u015fekilde sabitledik ve <code>z-index<\/code> ile di\u011fer t\u00fcm i\u00e7eriklerin \u00fczerinde olmas\u0131n\u0131 sa\u011flad\u0131k. <code>display: flex<\/code> ile i\u00e7indeki noktalar\u0131 kolayca ortalad\u0131k.<br \/>\n*   <code>.dot<\/code> elemanlar\u0131na geni\u015flik, y\u00fckseklik, renk ve <code>border-radius: 50%<\/code> vererek onlar\u0131 dairesel hale getirdik. <code>margin<\/code> ile aralar\u0131nda bo\u015fluk b\u0131rakt\u0131k.<br \/>\n*   <code>page-loader.hidden<\/code> s\u0131n\u0131f\u0131, y\u00fckleyiciyi gizlemek i\u00e7in kullan\u0131lacak ve <code>transition<\/code> \u00f6zelli\u011fi ile bu gizleme i\u015fleminin yumu\u015fak bir \u015fekilde ger\u00e7ekle\u015fmesini sa\u011flayaca\u011f\u0131z.<\/p>\n<p>### Animasyonlar\u0131 Olu\u015fturma: Keyframes ve Zamanlama<\/p>\n<p>\u015eimdi y\u00fckleyicimize hayat verecek k\u0131sma geldik: CSS3 <code>@keyframes<\/code> kurallar\u0131 ile animasyonumuzu tan\u0131mlayaca\u011f\u0131z. Amac\u0131m\u0131z, her bir noktan\u0131n yukar\u0131 ve a\u015fa\u011f\u0131 z\u0131plamas\u0131n\u0131 sa\u011flamak ve bunu farkl\u0131 zamanlamalarla yaparak ak\u0131c\u0131 bir ard\u0131\u015f\u0131k efekt elde etmek.<\/p>\n<p>#### Bounce Animasyonu<\/p>\n<p>Tek bir noktan\u0131n z\u0131plama hareketini tan\u0131mlayacak bir <code>@keyframes<\/code> kural\u0131 olu\u015ftural\u0131m. Bu animasyon, noktan\u0131n dikey konumunu (<code>transform: translateY()<\/code>) de\u011fi\u015ftirecek.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css i\u00e7ine ekleyin <\/em>\/\n\n@keyframes bounce {\n    0%, 100% {\n        transform: translateY(0); \/<em> Ba\u015flang\u0131\u00e7 ve biti\u015f konumunda normal seviye <\/em>\/\n    }\n    50% {\n        transform: translateY(-15px); \/<em> Ortada yukar\u0131 do\u011fru z\u0131pla <\/em>\/\n    }\n}<\/code><\/pre>\n<p>Bu <code>bounce<\/code> anahtar kareleri \u015fu anlama geliyor:<br \/>\n*   <code>0%<\/code> (animasyonun ba\u015flang\u0131c\u0131) ve <code>100%<\/code> (animasyonun sonu) noktas\u0131 normal konumunda (<code>translateY(0)<\/code>).<br \/>\n*   <code>50%<\/code> (animasyonun ortas\u0131) noktas\u0131 15 piksel yukar\u0131 z\u0131plam\u0131\u015f (<code>translateY(-15px)<\/code>).<\/p>\n<p>\u015eimdi bu animasyonu <code>.dot<\/code> elemanlar\u0131m\u0131za uygulayal\u0131m:<\/p>\n<pre><code class=\"language-css\">\/<em> style.css i\u00e7indeki .dot tan\u0131m\u0131na ekleyin <\/em>\/\n\n.dot {\n    \/<em> ... \u00f6nceki stiller ... <\/em>\/\n    animation: bounce 0.6s ease-in-out infinite; \/<em> Animasyonu uygula <\/em>\/\n}<\/code><\/pre>\n<p>Burada <code>animation<\/code> k\u0131salt\u0131lm\u0131\u015f \u00f6zelli\u011fini kulland\u0131k:<br \/>\n*   <code>bounce<\/code>: Uygulanacak <code>@keyframes<\/code> ad\u0131.<br \/>\n*   <code>0.6s<\/code>: Animasyonun tek bir d\u00f6ng\u00fcs\u00fcn\u00fcn s\u00fcresi (0.6 saniye).<br \/>\n*   <code>ease-in-out<\/code>: Animasyonun h\u0131z e\u011frisi. Ba\u015fta yava\u015f ba\u015flar, ortada h\u0131zlan\u0131r ve sonda tekrar yava\u015flar, bu da daha do\u011fal bir z\u0131plama hissi verir.<br \/>\n*   <code>infinite<\/code>: Animasyonun sonsuz kez tekrar etmesini sa\u011flar.<\/p>\n<p>\u015eu anda t\u00fcm noktalar ayn\u0131 anda z\u0131playacakt\u0131r. Bu da istedi\u011fimiz ard\u0131\u015f\u0131k z\u0131plama efekti yerine senkronize bir hareket yarat\u0131r.<\/p>\n<p>#### Gecikme ile Senkronizasyon<\/p>\n<p>Ard\u0131\u015f\u0131k z\u0131plama efektini elde etmek i\u00e7in her bir noktaya farkl\u0131 bir <code>animation-delay<\/code> (animasyon gecikmesi) uygulamam\u0131z gerekiyor. Bu, animasyonun her nokta i\u00e7in biraz farkl\u0131 zamanlarda ba\u015flamas\u0131n\u0131 sa\u011flayacak.<\/p>\n<pre><code class=\"language-css\">\/<em> style.css i\u00e7ine ekleyin <\/em>\/\n\n.dot:nth-child(1) {\n    animation-delay: 0s; \/<em> \u0130lk nokta hemen ba\u015flar <\/em>\/\n}\n\n.dot:nth-child(2) {\n    animation-delay: 0.1s; \/<em> \u0130kinci nokta 0.1 saniye sonra ba\u015flar <\/em>\/\n}\n\n.dot:nth-child(3) {\n    animation-delay: 0.2s; \/<em> \u00dc\u00e7\u00fcnc\u00fc nokta 0.2 saniye sonra ba\u015flar <\/em>\/\n}\n\n\/<em> Dilerseniz 4. nokta i\u00e7in de ekleyebilirsiniz <\/em>\/\n\/*\n.dot:nth-child(4) {\n    animation-delay: 0.3s;\n}\n*\/<\/code><\/pre>\n<p>Bu kod par\u00e7as\u0131, her bir <code>.dot<\/code> eleman\u0131na, s\u0131ras\u0131na g\u00f6re artan bir gecikme s\u00fcresi atar. B\u00f6ylece ilk nokta hemen z\u0131plamaya ba\u015flarken, ikincisi biraz bekler, \u00fc\u00e7\u00fcnc\u00fcs\u00fc biraz daha bekler. Bu k\u00fc\u00e7\u00fck gecikmeler, noktalar\u0131n bir dalga efektiyle ard\u0131\u015f\u0131k olarak z\u0131plamas\u0131n\u0131 sa\u011flayarak “z\u0131playan top” hissiyat\u0131n\u0131 yarat\u0131r. <code>animation-delay<\/code> de\u011ferlerini <code>animation-duration<\/code> ile orant\u0131l\u0131 olarak ayarlamak, animasyonun ak\u0131c\u0131l\u0131\u011f\u0131 i\u00e7in \u00f6nemlidir. \u00d6rne\u011fin, 0.6 saniyelik bir animasyon i\u00e7in 0.1 saniyelik gecikmeler olduk\u00e7a uygundur.<\/p>\n<p>#### Animasyonun P\u00fcr\u00fczs\u00fczle\u015ftirilmesi<\/p>\n<p><code>ease-in-out<\/code> zamanlama fonksiyonu genellikle \u00e7o\u011fu z\u0131plama efekti i\u00e7in yeterince iyidir. Ancak daha \u00f6zel bir his istiyorsan\u0131z, <code>cubic-bezier()<\/code> fonksiyonunu kullanarak kendi \u00f6zel zamanlama e\u011frinizi tan\u0131mlayabilirsiniz. \u00d6rne\u011fin: <code>animation-timing-function: cubic-bezier(.28,.84,.42,1);<\/code> gibi de\u011ferler, daha yayl\u0131 bir etki yaratabilir.<\/p>\n<p>Ayr\u0131ca, <code>animation-fill-mode: both<\/code> \u00f6zelli\u011fi, animasyonun ba\u015flamadan \u00f6nceki ve bittikten sonraki durumunu kontrol eder. Biz <code>infinite<\/code> kulland\u0131\u011f\u0131m\u0131z i\u00e7in bu genelde \u00e7ok kritik de\u011fil, ancak animasyonun biti\u015f durumunu korumak istedi\u011finiz tek d\u00f6ng\u00fcl\u00fc animasyonlarda faydal\u0131d\u0131r.<\/p>\n<p>### Y\u00fckleyiciyi Sayfaya Entegre Etme ve Geli\u015ftirmeler<\/p>\n<p>Y\u00fckleyicimiz art\u0131k hareket ediyor! \u015eimdi onu ger\u00e7ek bir web sayfas\u0131na entegre etme ve baz\u0131 pratik geli\u015ftirmeler ekleme zaman\u0131.<\/p>\n<p>#### JavaScript ile Kontrol<\/p>\n<p>Bir sayfa y\u00fckleyicisi, sayfa tamamen y\u00fcklendi\u011finde veya belirli bir i\u015flem tamamland\u0131\u011f\u0131nda ortadan kaybolmal\u0131d\u0131r. Bunu genellikle JavaScript ile kontrol ederiz.<\/p>\n<pre><code class=\"language-javascript\">\/\/ script.js\ndocument.addEventListener('DOMContentLoaded', function() {\n    \/\/ DOM tamamen y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r (resimler, CSS vb. beklenmez)\n    console.log(\"DOM i\u00e7eri\u011fi y\u00fcklendi.\");\n\n    \/\/ Y\u00fckleyiciyi biraz gecikmeyle gizle, b\u00f6ylece kullan\u0131c\u0131 animasyonu g\u00f6rebilir\n    setTimeout(function() {\n        const pageLoader = document.querySelector('.page-loader');\n        if (pageLoader) {\n            pageLoader.classList.add('hidden');\n            \/\/ Animasyon bittikten sonra loader'\u0131 DOM'dan tamamen kald\u0131rabiliriz\n            pageLoader.addEventListener('transitionend', function() {\n                pageLoader.style.display = 'none';\n                document.body.style.overflow = ''; \/\/ Sayfa kayd\u0131rmay\u0131 tekrar etkinle\u015ftir\n            }, { once: true }); \/\/ Olay dinleyicisini bir kez \u00e7al\u0131\u015ft\u0131r\n        }\n    }, 1000); \/\/ 1 saniye sonra gizle (animasyonu g\u00f6stermek i\u00e7in)\n});\n\n\/\/ window.onload, t\u00fcm kaynaklar (resimler, videolar vb.) y\u00fcklendi\u011finde \u00e7al\u0131\u015f\u0131r\nwindow.onload = function() {\n    console.log(\"T\u00fcm sayfa kaynaklar\u0131 y\u00fcklendi.\");\n    \/\/ E\u011fer loader'\u0131 sadece t\u00fcm kaynaklar y\u00fcklendi\u011finde gizlemek isterseniz, yukar\u0131daki setTimeout'u buraya ta\u015f\u0131yabilirsiniz.\n    \/\/ Ancak DOMContentLoaded genellikle daha erken tetiklendi\u011fi i\u00e7in daha iyi bir kullan\u0131c\u0131 deneyimi sunar.\n};<\/code><\/pre>\n<p>Bu JavaScript kodu:<br \/>\n1.  <code>DOMContentLoaded<\/code> olay\u0131n\u0131 dinler. Bu olay, HTML belgesi tamamen y\u00fcklendi\u011finde ve ayr\u0131\u015ft\u0131r\u0131ld\u0131\u011f\u0131nda tetiklenir, ancak CSS, resimler gibi d\u0131\u015f kaynaklar\u0131n y\u00fcklenmesini beklemez. Bu genellikle bir y\u00fckleyiciyi gizlemek i\u00e7in iyi bir zamand\u0131r.<br \/>\n2.  <code>setTimeout<\/code> kullanarak y\u00fckleyicinin en az 1 saniye g\u00f6r\u00fcn\u00fcr kalmas\u0131n\u0131 sa\u011flar\u0131z. Bu, kullan\u0131c\u0131n\u0131n animasyonu fark etmesi i\u00e7in yeterli s\u00fcreyi tan\u0131r.<br \/>\n3.  <code>page-loader<\/code> eleman\u0131na <code>hidden<\/code> s\u0131n\u0131f\u0131n\u0131 ekleriz. Bu s\u0131n\u0131f, CSS’imizdeki <code>transition<\/code> \u00f6zelli\u011fi sayesinde y\u00fckleyiciyi yava\u015f\u00e7a opakl\u0131\u011f\u0131n\u0131 azaltarak gizler.<br \/>\n4.  <code>transitionend<\/code> olay\u0131 dinleyicisi ile gizleme animasyonu tamamland\u0131\u011f\u0131nda, <code>display: none<\/code> yaparak y\u00fckleyiciyi DOM’dan tamamen kald\u0131r\u0131r\u0131z (veya sadece g\u00f6r\u00fcnmez yapar\u0131z) ve <code>body<\/code> \u00fczerindeki <code>overflow: hidden<\/code> stilini kald\u0131rarak sayfan\u0131n kayd\u0131r\u0131labilirli\u011fini geri getiririz. <code>once: true<\/code> se\u00e7ene\u011fi ile bu dinleyicinin sadece bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar\u0131z.<\/p>\n<p>#### Eri\u015filebilirlik ve Semantik<\/p>\n<p>Y\u00fckleyiciler g\u00f6rsel olarak etkili olsa da, ekran okuyucu kullanan ki\u015filer i\u00e7in anlams\u0131z kalabilirler. Eri\u015filebilirli\u011fi art\u0131rmak i\u00e7in baz\u0131 ad\u0131mlar atabiliriz:<\/p>\n<p>*   <strong><code>aria-live=\"polite\"<\/code>:<\/strong> Y\u00fckleyici kapsay\u0131c\u0131s\u0131na bu \u00f6zelli\u011fi eklemek, ekran okuyucular\u0131na bu alandaki de\u011fi\u015fikliklerin kullan\u0131c\u0131ya nazik\u00e7e bildirilmesi gerekti\u011fini s\u00f6yler.<br \/>\n*   <strong><code>role=\"status\"<\/code>:<\/strong> Benzer \u015fekilde, bu rol de eleman\u0131n bir durum mesaj\u0131 i\u00e7erdi\u011fini belirtir.<br \/>\n*   <strong>G\u00f6rsel Olarak Gizlenmi\u015f Metin:<\/strong> <code>sr-only<\/code> (screen reader only) gibi bir s\u0131n\u0131fla sadece ekran okuyuculara y\u00f6nelik “Y\u00fckleniyor…” gibi bir metin eklemek, durumu netle\u015ftirir.<\/p>\n<pre><code class=\"language-html\"><div class=\"page-loader\" role=\"status\" aria-live=\"polite\">\n    <span class=\"sr-only\">Sayfa Y\u00fckleniyor...<\/span>\n    <div class=\"dot\"><\/div>\n    <div class=\"dot\"><\/div>\n    <div class=\"dot\"><\/div>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-css\">\/<em> style.css i\u00e7ine ekleyin <\/em>\/\n.sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border-width: 0;\n}<\/code><\/pre>\n<p>Bu, ekran okuyucular\u0131n “Sayfa Y\u00fckleniyor…” mesaj\u0131n\u0131 okumas\u0131n\u0131 sa\u011flar ve g\u00f6rme engelli kullan\u0131c\u0131lar i\u00e7in de deneyimi iyile\u015ftirir.<\/p>\n<p>#### Tasar\u0131m Geli\u015ftirmeleri<\/p>\n<p>Bu temel z\u0131playan y\u00fckleyiciyi bir\u00e7ok farkl\u0131 \u015fekilde \u00f6zelle\u015ftirebilirsiniz:<\/p>\n<p>*   <strong>Renkler ve Boyutlar:<\/strong> <code>.dot<\/code> rengini, boyutunu veya <code>.page-loader<\/code> arka plan rengini de\u011fi\u015ftirerek markan\u0131za uygun hale getirebilirsiniz.<br \/>\n*   <strong>Daha Fazla Nokta:<\/strong> Daha fazla <code>.dot<\/code> eleman\u0131 ekleyerek animasyonu zenginle\u015ftirebilir, her birine farkl\u0131 <code>animation-delay<\/code> atayabilirsiniz.<br \/>\n*   <strong>Farkl\u0131 Animasyonlar:<\/strong> <code>transform: translateY()<\/code> yerine <code>transform: scale()<\/code> kullanarak noktalar\u0131n b\u00fcy\u00fcy\u00fcp k\u00fc\u00e7\u00fclmesini sa\u011flayabilir veya <code>opacity<\/code> ile solup tekrar belirmesini sa\u011flayabilirsiniz.<br \/>\n*   <strong>Loader’a Metin Ekleme:<\/strong> Noktalar\u0131n alt\u0131na “Y\u00fckleniyor…” veya \u00f6zel bir mesaj ekleyebilirsiniz.<br \/>\n*   <strong>Progres \u00c7ubu\u011fu:<\/strong> Animasyonlu noktalar\u0131n yan\u0131 s\u0131ra, y\u00fckleme ilerlemesini g\u00f6steren bir y\u00fczde veya \u00e7ubuk eklemek de m\u00fcmk\u00fcnd\u00fcr.<\/p>\n<p>### Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/p>\n<p>Bu rehberde, CSS3 <code>@keyframes<\/code> ve <code>animation<\/code> \u00f6zelliklerini kullanarak nas\u0131l basit ama etkili bir z\u0131playan nokta sayfa y\u00fckleyicisi olu\u015fturaca\u011f\u0131m\u0131z\u0131 \u00f6\u011frendik. HTML yap\u0131s\u0131ndan temel CSS stillerine, animasyon gecikmelerinden JavaScript kontrol\u00fcne ve eri\u015filebilirlik ipu\u00e7lar\u0131na kadar her ad\u0131m\u0131 detayl\u0131ca inceledik.<\/p>\n<p>CSS3 animasyonlar\u0131, JavaScript’e k\u0131yasla genellikle daha performansl\u0131 ve taray\u0131c\u0131 taraf\u0131ndan daha iyi optimize edilmi\u015f animasyonlar olu\u015fturmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Bu t\u00fcr y\u00fckleyiciler, kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rarak beklemeyi daha az s\u0131k\u0131c\u0131 hale getirir ve sitenize profesyonel bir dokunu\u015f katar. Kendi tasar\u0131mlar\u0131n\u0131z\u0131 deneyerek ve farkl\u0131 animasyon \u00f6zelliklerini ke\u015ffederek yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rakmaktan \u00e7ekinmeyin!<\/p>\n<p>#### S\u0131k\u00e7a Sorulan Sorular (SSS)<\/p>\n<p><strong>Q1: CSS animasyonlar\u0131 sayfa performans\u0131n\u0131 etkiler mi?<\/strong><br \/>\n<strong>A1:<\/strong> Genellikle hay\u0131r, aksine JavaScript tabanl\u0131 animasyonlara g\u00f6re daha performansl\u0131d\u0131rlar. Modern taray\u0131c\u0131lar CSS animasyonlar\u0131n\u0131 GPU h\u0131zland\u0131rmas\u0131yla i\u015fleyebilir, bu da CPU’ya daha az y\u00fck bindirir ve daha ak\u0131c\u0131 animasyonlar sa\u011flar. Ancak \u00e7ok karma\u015f\u0131k veya \u00e7ok fazla animasyonu ayn\u0131 anda \u00e7al\u0131\u015ft\u0131rmak performans\u0131 etkileyebilir.<\/p>\n<p><strong>Q2: Neden bu y\u00fckleyici i\u00e7in JavaScript yerine CSS animasyonlar\u0131 kulland\u0131k?<\/strong><br \/>\n<strong>A2:<\/strong> CSS animasyonlar\u0131, DOM manipulation (DOM manip\u00fclasyonu) gerektirmedi\u011fi ve taray\u0131c\u0131 taraf\u0131ndan do\u011frudan optimize edildi\u011fi i\u00e7in genellikle daha ak\u0131c\u0131 ve performansl\u0131d\u0131r. Basit g\u00f6rsel efektler ve durum ge\u00e7i\u015fleri i\u00e7in CSS, JavaScript’e g\u00f6re daha uygun bir se\u00e7enektir. JavaScript’i sadece animasyonun ne zaman ba\u015flay\u0131p ne zaman bitece\u011fini kontrol etmek i\u00e7in kulland\u0131k.<\/p>\n<p><strong>Q3: Y\u00fckleyiciyi sadece belirli bir alana (\u00f6rne\u011fin bir form g\u00f6nderimi s\u0131ras\u0131nda) nas\u0131l uygular\u0131m?<\/strong><br \/>\n<strong>A3:<\/strong> <code>.page-loader<\/code> s\u0131n\u0131f\u0131n\u0131 <code>position: fixed<\/code> yerine <code>position: absolute<\/code> olarak de\u011fi\u015ftirip, y\u00fckleyiciyi g\u00f6stermek istedi\u011finiz ana kapsay\u0131c\u0131ya (<code>position: relative<\/code> veya <code>position: absolute<\/code> verilmi\u015f olmal\u0131) yerle\u015ftirebilirsiniz. Bu \u015fekilde, y\u00fckleyici sadece o kapsay\u0131c\u0131n\u0131n i\u00e7indeki alan\u0131 kaplar.<\/p>\n<p><strong>Q4: Farkl\u0131 taray\u0131c\u0131larda uyumluluk nas\u0131l sa\u011flan\u0131r?<\/strong><br \/>\n<strong>A4:<\/strong> Modern CSS3 animasyon \u00f6zellikleri (<code>@keyframes<\/code>, <code>animation<\/code>) \u00e7o\u011fu g\u00fcncel taray\u0131c\u0131da standart olarak desteklenmektedir. Eski taray\u0131c\u0131lar i\u00e7in <code>webkit-<\/code>, <code>-moz-<\/code>, <code>-ms-<\/code>, <code>-o-<\/code> gibi vendor prefix’ler (taray\u0131c\u0131 \u00f6n ekleri) kullanmak gerekebilir (<code>-webkit-@keyframes<\/code>, <code>-webkit-animation<\/code>). Ancak g\u00fcn\u00fcm\u00fczde bu prefix’lere olan ihtiya\u00e7 giderek azalmaktad\u0131r. Otomatik olarak prefix ekleyen ara\u00e7lar (\u00f6rne\u011fin Autoprefixer) kullanmak iyi bir pratiktir.<\/p>\n<p><strong>Q5: Animasyon yava\u015f veya tak\u0131l\u0131yormu\u015f gibi g\u00f6r\u00fcn\u00fcyorsa ne yapmal\u0131y\u0131m?<\/strong><br \/>\n<strong>A5:<\/strong><br \/>\n*   <code>animation-duration<\/code> de\u011ferini k\u0131saltmay\u0131 deneyin.<br \/>\n*   <code>animation-timing-function<\/code> olarak <code>ease-in-out<\/code> veya <code>cubic-bezier<\/code> ile farkl\u0131 de\u011ferler deneyerek daha ak\u0131c\u0131 bir ge\u00e7i\u015f bulmaya \u00e7al\u0131\u015f\u0131n.<br \/>\n*   <code>transform<\/code> \u00f6zellikleri d\u0131\u015f\u0131nda (\u00f6rne\u011fin <code>width<\/code>, <code>height<\/code>, <code>margin<\/code> gibi) animasyon yapmaktan ka\u00e7\u0131n\u0131n, \u00e7\u00fcnk\u00fc <code>transform<\/code> ve <code>opacity<\/code> gibi \u00f6zellikler taray\u0131c\u0131 taraf\u0131ndan daha kolay optimize edilir.<br \/>\n*   Taray\u0131c\u0131n\u0131n geli\u015ftirici ara\u00e7lar\u0131ndaki performans monit\u00f6r\u00fcn\u00fc kullanarak animasyonun neden yava\u015flad\u0131\u011f\u0131n\u0131 analiz edebilirsiniz.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[126],"tags":[],"class_list":{"0":"post-31447","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-css3-html5","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.5 (Yoast SEO v25.3.1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Create a Bouncing Page Loader with CSS3 Animations\" \/>\n<meta property=\"og:description\" content=\"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-09T23:41:49+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"How To Create a Bouncing Page Loader with CSS3 Animations\",\"datePublished\":\"2025-10-09T23:41:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"},\"wordCount\":1944,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"CSS3 - HTML5\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\",\"name\":\"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-10-09T23:41:49+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Create a Bouncing Page Loader with CSS3 Animations\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","og_locale":"tr_TR","og_type":"article","og_title":"How To Create a Bouncing Page Loader with CSS3 Animations","og_description":"Merhaba geli\u015ftiriciler! Web sitelerimizde kullan\u0131c\u0131 deneyimini art\u0131rman\u0131n yollar\u0131ndan biri de y\u00fckleme s\u00fcrelerini y\u00f6netmektir. \u00d6zellikle b\u00fcy","og_url":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-10-09T23:41:49+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"12 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"How To Create a Bouncing Page Loader with CSS3 Animations","datePublished":"2025-10-09T23:41:49+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"},"wordCount":1944,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["CSS3 - HTML5"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","url":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/","name":"How To Create a Bouncing Page Loader with CSS3 Animations - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-10-09T23:41:49+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/how-to-create-a-bouncing-page-loader-with-css3-animations\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How To Create a Bouncing Page Loader with CSS3 Animations"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=31447"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447\/revisions"}],"predecessor-version":[{"id":31448,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/31447\/revisions\/31448"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=31447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=31447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=31447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}