Web sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran unsurlardan biri de kayd\u0131rma tabanl\u0131 animasyonlard\u0131r. Bu animasyonlar, kullan\u0131c\u0131 bir sayfay\u0131 a\u015fa\u011f\u0131 veya yukar\u0131 kayd\u0131rd\u0131k\u00e7a belirli \u00f6\u011felerin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc, konumunu, boyutunu veya opakl\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirerek dinamik ve s\u00fcr\u00fckleyici bir deneyim sunar. Bir \u00fcr\u00fcn\u00fcn \u00f6zelliklerini sergilemekten, etkile\u015fimli bir hikaye anlat\u0131m\u0131na kadar bir\u00e7ok senaryoda kullan\u0131labilirler. Modern web tasar\u0131m\u0131n\u0131n ayr\u0131lmaz bir par\u00e7as\u0131 haline gelen bu teknikler, do\u011fru uyguland\u0131\u011f\u0131nda sitenizin profesyonelli\u011fini ve esteti\u011fini \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131rabilir. Ancak, yanl\u0131\u015f veya d\u00fc\u015f\u00fcncesizce uyguland\u0131\u011f\u0131nda performans sorunlar\u0131na, kullan\u0131c\u0131 deneyimi d\u00fc\u015f\u00fc\u015f\u00fcne ve eri\u015filebilirlik engellerine yol a\u00e7abilirler.<\/p>\n
Bu makalede, JavaScript kullanarak kayd\u0131rma tabanl\u0131 animasyonlar\u0131 nas\u0131l uygulayaca\u011f\u0131m\u0131z\u0131 detayl\u0131 bir \u015fekilde inceleyece\u011fiz. Temel kavramlardan ba\u015flayarak, taray\u0131c\u0131 penceresi ve belge boyutlar\u0131, element konumland\u0131rma gibi konular\u0131 ele alacak, ard\u0131ndan Kayd\u0131rma tabanl\u0131 animasyonlar geli\u015ftirmeye ba\u015flamadan \u00f6nce, taray\u0131c\u0131 penceresi, belge boyutlar\u0131 ve elementlerin viewport i\u00e7indeki konumlar\u0131n\u0131 do\u011fru bir \u015fekilde anlamak hayati \u00f6neme sahiptir. Bu temel bilgiler, animasyonlar\u0131m\u0131z\u0131n tetiklenece\u011fi noktalar\u0131 ve nas\u0131l davranacaklar\u0131n\u0131 belirlememizi sa\u011flar.<\/p>\n JavaScript, bir web sayfas\u0131n\u0131n ve taray\u0131c\u0131 penceresinin boyutlar\u0131 hakk\u0131nda bilgi edinmek i\u00e7in \u00e7e\u015fitli \u00f6zellikler sunar:<\/p>\n * Bu de\u011ferleri kullanarak, kullan\u0131c\u0131n\u0131n belgenin ne kadar\u0131n\u0131 kayd\u0131rd\u0131\u011f\u0131n\u0131 veya kayd\u0131rma y\u00fczdesini hesaplayabiliriz. \u00d6rne\u011fin, belgenin kayd\u0131rma y\u00fczdesi \u015f\u00f6yle hesaplanabilir:<\/p>\n Bu y\u00fczde, bir animasyonun ilerlemesini kontrol etmek i\u00e7in temel bir parametre olabilir.<\/p>\n Bir animasyonun belirli bir element viewport’a girdi\u011finde veya belirli bir konuma ula\u015ft\u0131\u011f\u0131nda tetiklenmesi i\u00e7in elementin konumunu bilmemiz gerekir. Bunun i\u00e7in en g\u00fc\u00e7l\u00fc ara\u00e7 * Kayd\u0131rma tabanl\u0131 animasyonlar, s\u0131k s\u0131k tetiklenen * * Debouncing ve Throttling<\/strong>: Art\u0131k temel kavramlar\u0131 anlad\u0131\u011f\u0131m\u0131za g\u00f6re, Bu, en yayg\u0131n kayd\u0131rma tabanl\u0131 animasyon t\u00fcrlerinden biridir: bir element viewport'a girdi\u011finde canlan\u0131r.<\/p>\n Bu JavaScript kodu, Bu basit yap\u0131, bir\u00e7ok \"fade-in\" veya \"slide-up\" efekti i\u00e7in temel olu\u015fturur.<\/p>\n Bir elementin animasyonunu, kullan\u0131c\u0131n\u0131n kayd\u0131rma ilerlemesiyle do\u011frudan senkronize etmek, daha etkileyici ve kontroll\u00fc efektler yarat\u0131r. Bu, genellikle bir elementin belirli bir kayd\u0131rma aral\u0131\u011f\u0131nda (\u00f6rne\u011fin, viewport'a girdi\u011fi andan \u00e7\u0131kt\u0131\u011f\u0131 ana kadar) bir dizi CSS \u00f6zelli\u011fini de\u011fi\u015ftirmesi anlam\u0131na gelir.<\/p>\n Bu \u00f6rnek, Temel teknikler bir\u00e7ok senaryo i\u00e7in yeterli olsa da, daha karma\u015f\u0131k, performansl\u0131 ve bak\u0131m\u0131 kolay kayd\u0131rma tabanl\u0131 animasyonlar i\u00e7in ileri seviye ara\u00e7lara ve k\u00fct\u00fcphanelere ihtiya\u00e7 duyulabilir.<\/p>\n Bu \u00f6rnek, Kayd\u0131rmaya ba\u011fl\u0131 animasyonlar, bir animasyonun ilerlemesini do\u011frudan kullan\u0131c\u0131n\u0131n kayd\u0131rma pozisyonuyla ili\u015fkilendiren animasyonlard\u0131r. Geleneksel olarak bu, JavaScript ile Modern web platformunda, bu t\u00fcr animasyonlar\u0131 daha verimli bir \u015fekilde uygulamak i\u00e7in CSS JavaScript ile kayd\u0131rmaya ba\u011fl\u0131 animasyonlar olu\u015ftururken, CSS de\u011fi\u015fkenleri (custom properties) kullanmak faydal\u0131 olabilir. JavaScript ile hesaplanan kayd\u0131rma y\u00fczdesini bir CSS de\u011fi\u015fkenine atayarak, bu de\u011fi\u015fkeni CSS i\u00e7inde animasyonlu \u00f6zellikler i\u00e7in kullanabiliriz:<\/p>\n Bu y\u00f6ntem, JavaScript'in sadece de\u011ferleri g\u00fcncellemesini, animasyonun ise tamamen CSS taraf\u0131ndan y\u00f6netilmesini sa\u011flayarak performans avantajlar\u0131 sunar.<\/p>\n Karma\u015f\u0131k kayd\u0131rma tabanl\u0131 animasyonlar geli\u015ftirmek, s\u0131f\u0131rdan yap\u0131ld\u0131\u011f\u0131nda \u00e7ok zaman al\u0131c\u0131 ve hataya a\u00e7\u0131k olabilir. Bu nedenle, bir\u00e7ok geli\u015ftirici haz\u0131r k\u00fct\u00fcphaneleri tercih eder.<\/p>\n * GSAP ScrollTrigger<\/strong>: GreenSock Animation Platform (GSAP), web animasyonlar\u0131 i\u00e7in end\u00fcstri standard\u0131 kabul edilen g\u00fc\u00e7l\u00fc bir k\u00fct\u00fcphanedir. ScrollTrigger eklentisi, GSAP'\u0131n animasyon yeteneklerini kayd\u0131rma olaylar\u0131yla birle\u015ftirerek inan\u0131lmaz derecede esnek ve performansl\u0131 kayd\u0131rma tabanl\u0131 animasyonlar olu\u015fturman\u0131za olanak tan\u0131r. Bir elementin viewport'a girdi\u011finde, \u00e7\u0131kt\u0131\u011f\u0131nda veya belirli bir kayd\u0131rma aral\u0131\u011f\u0131nda nas\u0131l davranaca\u011f\u0131n\u0131 tan\u0131mlamak i\u00e7in sezgisel bir API sunar. Paralaks, sticky elemanlar, kayd\u0131rma ilerlemesine ba\u011fl\u0131 animasyonlar ve \u00e7ok daha fazlas\u0131 i\u00e7in m\u00fckemmel bir \u00e7\u00f6z\u00fcmd\u00fcr. \u00d6\u011frenme e\u011frisi biraz y\u00fcksek olsa da, sundu\u011fu kontrol ve performans buna de\u011ferdir.<\/p>\n * ScrollReveal.js<\/strong>: Daha \u00e7ok \"g\u00f6r\u00fcn\u00fcr oldu\u011funda animasyon\" tipi efektler i\u00e7in tasarlanm\u0131\u015f, kullan\u0131m\u0131 kolay ve hafif bir k\u00fct\u00fcphanedir. Elementlerin sayfada g\u00f6r\u00fcnd\u00fc\u011f\u00fcnde otomatik olarak canlanmas\u0131n\u0131 sa\u011flar. Karma\u015f\u0131k animasyon senaryolar\u0131 yerine basit giri\u015f efektleri i\u00e7in idealdir. Bir k\u00fct\u00fcphane se\u00e7erken, projenizin karma\u015f\u0131kl\u0131\u011f\u0131n\u0131, performans gereksinimlerini, geli\u015ftirme h\u0131z\u0131n\u0131 ve k\u00fct\u00fcphanenin topluluk deste\u011fini g\u00f6z \u00f6n\u00fcnde bulundurmal\u0131s\u0131n\u0131z.<\/p>\n Kayd\u0131rma tabanl\u0131 animasyonlar\u0131n web tasar\u0131m\u0131nda nas\u0131l kullan\u0131labilece\u011fine dair birka\u00e7 yayg\u0131n \u00f6rne\u011fi inceleyelim.<\/p>\n Paralaks efekti, arka plan ve \u00f6n plan \u00f6\u011felerinin farkl\u0131 h\u0131zlarda kayd\u0131r\u0131lmas\u0131yla \u00fc\u00e7 boyutlu bir derinlik hissi yaratan pop\u00fcler bir g\u00f6rsel tekniktir. Kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a, daha yava\u015f hareket eden arka plan \u00f6\u011feleri, daha h\u0131zl\u0131 hareket eden \u00f6n plan \u00f6\u011feleriyle birlikte hareket eder.<\/p>\n Basit bir paralaks etkisi JavaScript ile \u015f\u00f6yle uygulanabilir:<\/p>\n Bu \u00f6rnekte, \"Sticky\" elemanlar, belirli bir kayd\u0131rma noktas\u0131na ula\u015ft\u0131klar\u0131nda sabitlenen ve kullan\u0131c\u0131 kayd\u0131rmaya devam ettik\u00e7e sayfada kalan elemanlard\u0131r. CSS \u00d6rne\u011fin, bir men\u00fcn\u00fcn sayfan\u0131n \u00fcst k\u0131sm\u0131na geldi\u011finde sabitlenmesini ve ayn\u0131 zamanda renginin de\u011fi\u015fmesini sa\u011flayabiliriz:<\/p>\n Ve CSS'i:<\/p>\n Bu senaryoda, Kayd\u0131rma tabanl\u0131 animasyonlar, web sitelerinde g\u00f6rsel hikaye anlat\u0131m\u0131 i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a, i\u00e7erik ad\u0131m ad\u0131m ortaya \u00e7\u0131kabilir, bir grafik veya diyagram canlanabilir, metinler farkl\u0131 efektlerle g\u00f6r\u00fcnebilir veya bir \u00fcr\u00fcn\u00fcn farkl\u0131 \u00f6zellikleri sergilenebilir.<\/p>\n \u00d6rne\u011fin, bir \u00fcr\u00fcn sayfas\u0131nda, kullan\u0131c\u0131 kayd\u0131rd\u0131k\u00e7a \u00fcr\u00fcn\u00fcn farkl\u0131 a\u00e7\u0131lardan foto\u011fraflar\u0131n\u0131n veya \u00f6zelliklerinin animasyonlu bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flayabiliriz. Bu genellikle, sayfan\u0131n belirli b\u00f6l\u00fcmlerine ula\u015f\u0131ld\u0131\u011f\u0131nda tetiklenen animasyonlar (Intersection Observer ile) veya kayd\u0131rma ilerlemesine ba\u011fl\u0131 olarak de\u011fi\u015fen animasyonlar (GSAP ScrollTrigger ile) kullan\u0131larak yap\u0131l\u0131r. Bu t\u00fcr uygulamalar, kullan\u0131c\u0131n\u0131n dikkatini \u00e7ekerek ve i\u00e7eri\u011fi daha ilgi \u00e7ekici hale getirerek marka bilinirli\u011fini ve \u00fcr\u00fcn etkile\u015fimini art\u0131rabilir.<\/p>\n Kayd\u0131rma tabanl\u0131 animasyonlar\u0131 uygularken, yaln\u0131zca teknik yeterlilik de\u011fil, ayn\u0131 zamanda kullan\u0131c\u0131 deneyimi ve eri\u015filebilirlik gibi fakt\u00f6rleri de g\u00f6z \u00f6n\u00fcnde bulundurmak \u00f6nemlidir.<\/p>\n T\u00fcm kullan\u0131c\u0131lar\u0131n sitenizi sorunsuz bir \u015fekilde kullanabilmesini sa\u011flamak, modern web geli\u015ftirmenin temelidir. Animasyonlar, baz\u0131 kullan\u0131c\u0131lar i\u00e7in dikkat da\u011f\u0131t\u0131c\u0131, mide buland\u0131r\u0131c\u0131 veya hatta ba\u015f d\u00f6nmesine neden olabilir.<\/p>\n * JavaScript taraf\u0131nda da bu ayar\u0131 kontrol etmek m\u00fcmk\u00fcnd\u00fcr: Mobil cihazlar, masa\u00fcst\u00fc bilgisayarlara g\u00f6re daha s\u0131n\u0131rl\u0131 i\u015flem g\u00fcc\u00fcne sahip olabilir ve dokunmatik kayd\u0131rma deneyimi farkl\u0131d\u0131r.<\/p>\n * Performans<\/strong>: Mobil cihazlarda animasyonlar\u0131n performans\u0131 daha kritik olabilir. A\u015f\u0131r\u0131 karma\u015f\u0131k veya yo\u011fun animasyonlardan ka\u00e7\u0131n\u0131n. GPU h\u0131zland\u0131rmal\u0131 CSS Arama motorlar\u0131, web sitelerinin i\u00e7eri\u011fini tarayarak indeksler. Animasyonlar, i\u00e7eri\u011fin taranabilirli\u011fini etkileyebilir.<\/p>\n * \u0130\u00e7eri\u011fin G\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc<\/strong>: Animasyonlarla gizlenen veya geciktirilen i\u00e7eri\u011fin, arama motoru botlar\u0131 taraf\u0131ndan hala eri\u015filebilir ve taranabilir oldu\u011fundan emin olun. Genellikle, CSS ile g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fc kontrol edilen i\u00e7erik taranabilirken, tamamen JavaScript ile dinamik olarak y\u00fcklenen i\u00e7eriklerde dikkatli olmak gerekir. Kulland\u0131\u011f\u0131n\u0131z JavaScript API'lerinin (\u00f6rne\u011fin JavaScript ile kayd\u0131rma tabanl\u0131 animasyonlar uygulamak, web sitelerinizi daha etkile\u015fimli, dinamik ve ak\u0131lda kal\u0131c\u0131 hale getirmenin g\u00fc\u00e7l\u00fc bir yoludur. Temel taray\u0131c\u0131 API'lerini ve JavaScript kavramlar\u0131n\u0131 anlayarak, basit \"g\u00f6r\u00fcn\u00fcr oldu\u011funda animasyon\"lardan, karma\u015f\u0131k kayd\u0131rma ilerlemesine ba\u011fl\u0131 efektlere kadar geni\u015f bir yelpazede animasyonlar olu\u015fturabilirsiniz. Ancak, bu teknikleri uygularken performans, eri\u015filebilirlik, mobil uyumluluk ve SEO gibi fakt\u00f6rleri g\u00f6z \u00f6n\u00fcnde bulundurmak hayati \u00f6neme sahiptir. \u0130yi optimize edilmi\u015f ve d\u00fc\u015f\u00fcn\u00fclm\u00fc\u015f animasyonlar, kullan\u0131c\u0131 deneyimini zenginle\u015ftirirken, k\u00f6t\u00fc uygulananlar tam tersi etki yaratabilir. Gelecekte, CSS scroll<\/code> olay\u0131n\u0131 dinleme, requestAnimationFrame<\/code> kullan\u0131m\u0131 ve performans optimizasyonlar\u0131 gibi pratik tekniklere ge\u00e7ece\u011fiz. Intersection Observer API gibi modern taray\u0131c\u0131 API’lerinin sundu\u011fu avantajlar\u0131 ke\u015ffedecek, GSAP ScrollTrigger gibi pop\u00fcler k\u00fct\u00fcphanelerin g\u00fcc\u00fcn\u00fc anlayacak ve paralaks efektleri, sticky elemanlar gibi yayg\u0131n uygulama \u00f6rneklerini inceleyece\u011fiz. Son olarak, eri\u015filebilirlik, mobil uyumluluk ve performans gibi en iyi uygulamalar ve dikkat edilmesi gereken \u00f6nemli noktalar \u00fczerinde duraca\u011f\u0131z. Amac\u0131m\u0131z, okuyuculara kayd\u0131rma tabanl\u0131 animasyonlar\u0131 verimli ve etkili bir \u015fekilde uygulamak i\u00e7in gerekli bilgi ve ara\u00e7lar\u0131 sunmakt\u0131r.<\/p>\nTemel Kavramlar ve Haz\u0131rl\u0131k<\/h3>\n
Taray\u0131c\u0131 Penceresi ve Belge Boyutlar\u0131<\/h4>\n
window.innerHeight<\/code> ve window.innerWidth<\/code><\/strong>: Bu \u00f6zellikler, taray\u0131c\u0131 penceresinin (viewport) i\u00e7eri\u011fi g\u00f6r\u00fcnt\u00fcleyen k\u0131sm\u0131n\u0131n piksel cinsinden y\u00fcksekli\u011fini ve geni\u015fli\u011fini verir. Bu de\u011ferler, kayd\u0131rma \u00e7ubuklar\u0131, taray\u0131c\u0131 aray\u00fcz\u00fc gibi unsurlar\u0131 i\u00e7ermez. \u00d6zellikle bir elementin ne zaman viewport’a girdi\u011fini veya \u00e7\u0131kt\u0131\u011f\u0131n\u0131 belirlemek i\u00e7in window.innerHeight<\/code> s\u0131k\u00e7a kullan\u0131l\u0131r.
\n* document.documentElement.scrollHeight<\/code> ve document.documentElement.clientHeight<\/code><\/strong>: scrollHeight<\/code>, belgenin t\u00fcm i\u00e7eri\u011finin kayd\u0131r\u0131labilir y\u00fcksekli\u011fini temsil eder. Bu, genellikle belgenin toplam y\u00fcksekli\u011fidir. clientHeight<\/code> ise <\/code> elementinin viewport’a s\u0131\u011fan k\u0131sm\u0131n\u0131n y\u00fcksekli\u011fidir. Bazen document.body.scrollHeight<\/code> de kullan\u0131labilir, ancak document.documentElement<\/code> daha tutarl\u0131 sonu\u00e7lar verir.
\n* window.scrollY<\/code> (veya window.pageYOffset<\/code>)<\/strong>: Bu \u00f6zellik, belgenin dikey olarak ne kadar kayd\u0131r\u0131ld\u0131\u011f\u0131n\u0131 g\u00f6sterir. Yani, belgenin en \u00fcst\u00fcnden viewport’un en \u00fcst\u00fcne kadar olan mesafedir. Modern taray\u0131c\u0131larda window.scrollY<\/code> tercih edilirken, eski taray\u0131c\u0131 uyumlulu\u011fu i\u00e7in window.pageYOffset<\/code> de kullan\u0131labilir.
\n* document.documentElement.scrollTop<\/code><\/strong>: Bu, <\/code> elementinin kayd\u0131rma pozisyonunu verir ve window.scrollY<\/code> ile benzer bir de\u011fer sunar. Taray\u0131c\u0131lar aras\u0131 uyumluluk i\u00e7in genellikle window.scrollY || document.documentElement.scrollTop || document.body.scrollTop<\/code> gibi bir yap\u0131 kullan\u0131l\u0131r.<\/p>\nconst scrollPercentage = (window.scrollY \/ (document.documentElement.scrollHeight - window.innerHeight)) * 100;<\/code><\/pre>\nElement Konumland\u0131rma<\/h4>\n
Element.getBoundingClientRect()<\/code> metodudur.<\/p>\nelement.getBoundingClientRect()<\/code><\/strong>: Bu metot, bir elementin boyutunu ve viewport’a g\u00f6re konumunu i\u00e7eren bir DOMRect<\/code> nesnesi d\u00f6nd\u00fcr\u00fcr. D\u00f6nd\u00fcr\u00fclen nesne a\u015fa\u011f\u0131daki \u00f6zellikleri i\u00e7erir:
\n * top<\/code><\/strong>: Elementin \u00fcst kenar\u0131n\u0131n viewport’un \u00fcst kenar\u0131na olan uzakl\u0131\u011f\u0131.
\n * bottom<\/code><\/strong>: Elementin alt kenar\u0131n\u0131n viewport’un \u00fcst kenar\u0131na olan uzakl\u0131\u011f\u0131.
\n * left<\/code><\/strong>: Elementin sol kenar\u0131n\u0131n viewport’un sol kenar\u0131na olan uzakl\u0131\u011f\u0131.
\n * right<\/code><\/strong>: Elementin sa\u011f kenar\u0131n\u0131n viewport’un sol kenar\u0131na olan uzakl\u0131\u011f\u0131.
\n * width<\/code><\/strong>: Elementin geni\u015fli\u011fi.
\n * height<\/code><\/strong>: Elementin y\u00fcksekli\u011fi.
\n Bu de\u011ferler, elementin viewport i\u00e7inde olup olmad\u0131\u011f\u0131n\u0131 veya ne kadar\u0131n\u0131n g\u00f6r\u00fcn\u00fcr oldu\u011funu belirlemek i\u00e7in kullan\u0131l\u0131r. \u00d6rne\u011fin, bir elementin viewport’a girdi\u011fini tespit etmek i\u00e7in genellikle element.getBoundingClientRect().top < window.innerHeight<\/code> ve element.getBoundingClientRect().bottom > 0<\/code> ko\u015fullar\u0131 kontrol edilir.<\/p>\nPerformans D\u00fc\u015f\u00fcnceleri<\/h4>\n
scroll<\/code> olay\u0131 nedeniyle performans sorunlar\u0131na yol a\u00e7abilir. Bu sorunlar\u0131 \u00f6nlemek i\u00e7in baz\u0131 \u00f6nemli teknikler vard\u0131r:<\/p>\nrequestAnimationFrame<\/code><\/strong>: Taray\u0131c\u0131, saniyede yakla\u015f\u0131k 60 kare (fps) h\u0131z\u0131nda \u00e7al\u0131\u015f\u0131r. E\u011fer animasyonlar\u0131m\u0131z bu h\u0131zla senkronize olmazsa, tak\u0131lmalar ve gecikmeler ya\u015fanabilir. requestAnimationFrame(callback)<\/code> metodu, taray\u0131c\u0131ya bir sonraki ekran yenilemesinden \u00f6nce belirli bir fonksiyonu \u00e7al\u0131\u015ft\u0131rmas\u0131n\u0131 s\u00f6yler. Bu, animasyonlar\u0131n taray\u0131c\u0131n\u0131n render d\u00f6ng\u00fcs\u00fcyle senkronize olmas\u0131n\u0131 sa\u011flar ve daha ak\u0131c\u0131 bir deneyim sunar. scroll<\/code> olay dinleyicisi i\u00e7inde do\u011frudan DOM manip\u00fclasyonu yapmak yerine, requestAnimationFrame<\/code> kullanarak bu i\u015flemleri ertelemek en iyi uygulamad\u0131r.<\/p>\nlet ticking = false;\n window.addEventListener('scroll', () => {\n if (!ticking) {\n window.requestAnimationFrame(() => {\n \/\/ Animasyon logic'ini burada \u00e7al\u0131\u015ft\u0131r\n ticking = false;\n });\n ticking = true;\n }\n });<\/code><\/pre>\nscroll<\/code> olay\u0131, kullan\u0131c\u0131 kayd\u0131rma yaparken saniyede y\u00fczlerce kez tetiklenebilir. Bu kadar s\u0131k tetiklenen bir olayda a\u011f\u0131r hesaplamalar yapmak performans\u0131 d\u00fc\u015f\u00fcr\u00fcr.
\n * Throttling<\/strong>: Bir fonksiyonun belirli bir zaman aral\u0131\u011f\u0131nda yaln\u0131zca bir kez \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. \u00d6rne\u011fin, her 100 milisaniyede bir.
\n * Debouncing<\/strong>: Bir fonksiyonun yaln\u0131zca belirli bir s\u00fcre (\u00f6rne\u011fin 200ms) boyunca tekrar tetiklenmedi\u011finde \u00e7al\u0131\u015fmas\u0131n\u0131 sa\u011flar. Kayd\u0131rma durdu\u011funda tetiklenecek i\u015flemler i\u00e7in faydal\u0131d\u0131r.
\n Ancak, requestAnimationFrame<\/code> kullan\u0131m\u0131 genellikle scroll<\/code> olay\u0131n\u0131n kendisi i\u00e7in debouncing\/throttling'e gerek kalmadan yeterli performans\u0131 sa\u011flar, \u00e7\u00fcnk\u00fc taray\u0131c\u0131 zaten kare h\u0131z\u0131nda \u00e7al\u0131\u015f\u0131r. Yine de, yo\u011fun hesaplamalar i\u00e7eren durumlarda bu teknikler faydal\u0131 olabilir.
\n* CSS transform<\/code> ve opacity<\/code> Kullan\u0131m\u0131<\/strong>: Animasyonlar i\u00e7in DOM'un layout<\/code> veya paint<\/code> a\u015famalar\u0131n\u0131 tetikleyen CSS \u00f6zelliklerinden (\u00f6rne\u011fin width<\/code>, height<\/code>, top<\/code>, left<\/code>) ka\u00e7\u0131nmak \u00f6nemlidir. Bunun yerine, transform<\/code> (\u00f6rne\u011fin translate<\/code>, scale<\/code>, rotate<\/code>) ve opacity<\/code> gibi \u00f6zellikleri kullanmak, taray\u0131c\u0131n\u0131n bu animasyonlar\u0131 GPU \u00fczerinde optimize etmesine olanak tan\u0131r, bu da \u00e7ok daha ak\u0131c\u0131 animasyonlar sa\u011flar.<\/p>\nKayd\u0131rma Olay\u0131n\u0131 Dinleme ve Temel Animasyonlar<\/h3>\n
scroll<\/code> olay\u0131n\u0131 dinleyerek nas\u0131l basit animasyonlar uygulayaca\u011f\u0131m\u0131z\u0131 g\u00f6relim.<\/p>\nBasit Bir \"G\u00f6r\u00fcn\u00fcr Oldu\u011funda Animasyon\"<\/h4>\n
const animateOnScrollElements = document.querySelectorAll('.animate-on-scroll');\n\nfunction checkElementsVisibility() {\n animateOnScrollElements.forEach(element => {\n const rect = element.getBoundingClientRect();\n \/\/ Elementin \u00fcst kenar\u0131 viewport'un alt\u0131ndan yukar\u0131da VE\n \/\/ Elementin alt kenar\u0131 viewport'un \u00fcst\u00fcnden a\u015fa\u011f\u0131da ise g\u00f6r\u00fcn\u00fcrd\u00fcr.\n const isVisible = (rect.top < window.innerHeight && rect.bottom > 0);\n\n if (isVisible) {\n element.classList.add('is-visible');\n } else {\n \/\/ \u0130ste\u011fe ba\u011fl\u0131: Element viewport'tan \u00e7\u0131kt\u0131\u011f\u0131nda animasyonu s\u0131f\u0131rla\n \/\/ element.classList.remove('is-visible');\n }\n });\n}\n\n\/\/ Ba\u015flang\u0131\u00e7ta kontrol et\ncheckElementsVisibility();\n\n\/\/ Kayd\u0131rma olay\u0131n\u0131 dinle (requestAnimationFrame ile optimize edilmi\u015f)\nlet ticking = false;\nwindow.addEventListener('scroll', () => {\n if (!ticking) {\n window.requestAnimationFrame(() => {\n checkElementsVisibility();\n ticking = false;\n });\n ticking = true;\n }\n});<\/code><\/pre>\n.animate-on-scroll<\/code> s\u0131n\u0131f\u0131na sahip t\u00fcm elementleri se\u00e7er. checkElementsVisibility<\/code> fonksiyonu, her bir elementin getBoundingClientRect()<\/code> metodunu kullanarak viewport i\u00e7inde olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer element g\u00f6r\u00fcn\u00fcrse, is-visible<\/code> s\u0131n\u0131f\u0131n\u0131 ekler. Bu s\u0131n\u0131f, CSS ile animasyonlar\u0131 tetiklemek i\u00e7in kullan\u0131labilir:<\/p>\n\/ Ba\u015flang\u0131\u00e7 durumu <\/em>\/\n.animate-on-scroll {\n opacity: 0;\n transform: translateY(50px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n}\n\n\/ G\u00f6r\u00fcn\u00fcr oldu\u011funda animasyonlu durum <\/em>\/\n.animate-on-scroll.is-visible {\n opacity: 1;\n transform: translateY(0);\n}<\/code><\/pre>\nKayd\u0131rma Y\u00fczdesine G\u00f6re Animasyon<\/h4>\n
const animatedElement = document.querySelector('.parallax-element');\n\nfunction animateBasedOnScroll() {\n const rect = animatedElement.getBoundingClientRect();\n const viewportHeight = window.innerHeight;\n\n \/\/ Elementin viewport i\u00e7indeki ba\u015flang\u0131\u00e7 ve biti\u015f noktalar\u0131\n const startPoint = rect.top + rect.height; \/\/ Elementin alt\u0131 viewport'un \u00fcst\u00fcne geldi\u011finde\n const endPoint = rect.top; \/\/ Elementin \u00fcst\u00fc viewport'un \u00fcst\u00fcne geldi\u011finde\n\n \/\/ Elementin viewport i\u00e7inde ne kadar ilerledi\u011fini y\u00fczde olarak hesapla\n \/\/ 0: Elementin alt\u0131 viewport'a yeni girmi\u015f\n \/\/ 1: Elementin \u00fcst\u00fc viewport'tan yeni \u00e7\u0131km\u0131\u015f (veya tam ortas\u0131nda)\n let progress = 1 - (startPoint \/ (viewportHeight + rect.height));\n progress = Math.max(0, Math.min(1, progress)); \/\/ 0 ile 1 aras\u0131nda s\u0131n\u0131rla\n\n \/\/ \u00d6rnek: Opakl\u0131k ve Y konumu de\u011fi\u015ftirme\n animatedElement.style.opacity = progress;\n animatedElement.style.transform = translateY(${progress * 100}px)<\/code>; \/\/ 0px'den 100px'e kayd\u0131r\n}\n\n\/\/ Kayd\u0131rma olay\u0131n\u0131 dinle (requestAnimationFrame ile optimize edilmi\u015f)\nlet ticking = false;\nwindow.addEventListener('scroll', () => {\n if (!ticking) {\n window.requestAnimationFrame(() => {\n animateBasedOnScroll();\n ticking = false;\n });\n ticking = true;\n }\n});\n\n\/\/ Ba\u015flang\u0131\u00e7ta da \u00e7al\u0131\u015ft\u0131r\nanimateBasedOnScroll();<\/code><\/pre>\n.parallax-element<\/code> s\u0131n\u0131f\u0131na sahip bir elementin viewport i\u00e7indeki kayd\u0131rma ilerlemesine g\u00f6re opakl\u0131\u011f\u0131n\u0131 ve dikey konumunu de\u011fi\u015ftirir. progress<\/code> de\u011fi\u015fkeni, elementin viewport i\u00e7inde ne kadar ilerledi\u011fini 0 ile 1 aras\u0131nda bir de\u011ferle temsil eder. Bu de\u011fer, daha karma\u015f\u0131k animasyonlar i\u00e7in ara de\u011ferleri hesaplamakta kullan\u0131labilir. \u00d6rne\u011fin, bir renk ge\u00e7i\u015fi, bir d\u00f6n\u00fc\u015f a\u00e7\u0131s\u0131 veya bir \u00f6l\u00e7eklendirme animasyonu bu progress<\/code> de\u011ferine g\u00f6re ayarlanabilir.<\/p>\n\u0130leri Seviye Teknikler ve K\u00fct\u00fcphaneler<\/h3>\n
Intersection Observer API<\/h4>\n
scroll<\/code> olay\u0131n\u0131 dinlemek yerine, bir elementin viewport ile kesi\u015fimini (yani g\u00f6r\u00fcn\u00fcrl\u00fc\u011f\u00fcn\u00fc) daha verimli bir \u015fekilde izlemek i\u00e7in Intersection Observer API<\/code> kullan\u0131labilir. Bu API, taray\u0131c\u0131ya bir elementin viewport'a ne zaman girdi\u011fini, ne zaman \u00e7\u0131kt\u0131\u011f\u0131n\u0131 ve ne kadar\u0131n\u0131n g\u00f6r\u00fcn\u00fcr oldu\u011funu bildiren bir geri arama fonksiyonu kaydetmenizi sa\u011flar. En b\u00fcy\u00fck avantaj\u0131, ana i\u015f par\u00e7ac\u0131\u011f\u0131nda (main thread) s\u00fcrekli hesaplamalar yapmaya gerek kalmamas\u0131 ve dolay\u0131s\u0131yla \u00e7ok daha iyi performans sunmas\u0131d\u0131r.<\/p>\nconst observerOptions = {\n root: null, \/\/ viewport'u k\u00f6k olarak kullan\n rootMargin: '0px', \/\/ k\u00f6k etraf\u0131nda ek bo\u015fluk\n threshold: 0.5 \/\/ elementin %50'si g\u00f6r\u00fcn\u00fcr oldu\u011funda tetikle\n};\n\nconst myObserver = new IntersectionObserver((entries, observer) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n \/\/ Element viewport'a girdi\n entry.target.classList.add('is-visible');\n \/\/ \u0130ste\u011fe ba\u011fl\u0131: Bir kez tetiklendikten sonra g\u00f6zlemlemeyi durdur\n \/\/ observer.unobserve(entry.target);\n } else {\n \/\/ Element viewport'tan \u00e7\u0131kt\u0131\n \/\/ entry.target.classList.remove('is-visible');\n }\n });\n}, observerOptions);\n\ndocument.querySelectorAll('.animate-on-scroll').forEach(element => {\n myObserver.observe(element);\n});<\/code><\/pre>\n.animate-on-scroll<\/code> s\u0131n\u0131f\u0131na sahip her element i\u00e7in bir g\u00f6zlemci olu\u015fturur. threshold: 0.5<\/code> ayar\u0131, elementin %50'si g\u00f6r\u00fcn\u00fcr oldu\u011funda isIntersecting<\/code> \u00f6zelli\u011fini true<\/code> yapar. Bu API, \u00f6zellikle \"g\u00f6r\u00fcn\u00fcr oldu\u011funda animasyon\" t\u00fcr\u00fc efektler i\u00e7in scroll<\/code> olay dinleyicilerine g\u00f6re \u00e7ok daha performansl\u0131 ve temiz bir \u00e7\u00f6z\u00fcmd\u00fcr.<\/p>\nScroll-Linked Animations (Kayd\u0131rmaya Ba\u011fl\u0131 Animasyonlar)<\/h4>\n
scroll<\/code> olay\u0131n\u0131 dinleyerek ve her kayd\u0131rmada CSS \u00f6zelliklerini manuel olarak g\u00fcncelleyerek yap\u0131l\u0131rd\u0131. Ancak bu yakla\u015f\u0131m, performans sorunlar\u0131na yol a\u00e7abilir ve y\u00f6netimi zor olabilir.<\/p>\nscroll-timeline<\/code> gibi deneysel \u00f6zellikler geli\u015ftirilmektedir. Bu \u00f6zellikler, CSS \u00fczerinden do\u011frudan kayd\u0131rma ilerlemesine ba\u011fl\u0131 animasyonlar tan\u0131mlaman\u0131za olanak tan\u0131r, bu da JavaScript'e olan ba\u011f\u0131ml\u0131l\u0131\u011f\u0131 azalt\u0131r ve performans\u0131 art\u0131r\u0131r. Ancak, bu \u00f6zellikler hen\u00fcz t\u00fcm taray\u0131c\u0131larda tam olarak desteklenmemektedir ve genellikle JavaScript k\u00fct\u00fcphaneleri tercih edilmektedir.<\/p>\n\/\/ \u00d6nceki \u00f6rnekteki gibi kayd\u0131rma y\u00fczdesi hesaplama\nfunction updateScrollProgress() {\n const scrollPercentage = (window.scrollY \/ (document.documentElement.scrollHeight - window.innerHeight));\n document.documentElement.style.setProperty('--scroll-progress', scrollPercentage);\n}\n\n\/\/ CSS'te kullan\u0131m\u0131\n\/*\n:root {\n --scroll-progress: 0;\n}\n\n.some-element {\n transform: translateY(calc(var(--scroll-progress) * -100px));\n opacity: var(--scroll-progress);\n}\n*\/<\/code><\/pre>\nK\u00fct\u00fcphaneler<\/h4>\n
\/\/ GSAP ve ScrollTrigger kurulumu (basit bir \u00f6rnek)\n gsap.registerPlugin(ScrollTrigger);\n\n gsap.to(\".my-element\", {\n x: 400, \/\/ x ekseninde 400px hareket et\n rotation: 360, \/\/ 360 derece d\u00f6n\n scrollTrigger: {\n trigger: \".my-element\", \/\/ Bu element tetikleyici\n start: \"top center\", \/\/ Elementin \u00fcst\u00fc viewport'un ortas\u0131na geldi\u011finde ba\u015fla\n end: \"bottom center\", \/\/ Elementin alt\u0131 viewport'un ortas\u0131na geldi\u011finde bitir\n scrub: true, \/\/ Kayd\u0131rma ile animasyonu senkronize et (0.5 saniye gecikme)\n markers: true \/\/ Geli\u015ftirme i\u00e7in tetikleyici i\u015faretleri g\u00f6ster\n }\n });<\/code><\/pre>\n
\n* AOS (Animate On Scroll)<\/strong>: ScrollReveal.js'ye benzer \u015fekilde, AOS da elementlerin g\u00f6r\u00fcn\u00fcr oldu\u011funda animasyonlar eklemek i\u00e7in kullan\u0131l\u0131r. Haz\u0131r animasyon s\u0131n\u0131flar\u0131 ve kolay yap\u0131land\u0131rma se\u00e7enekleri sunar.
\n* Locomotive Scroll<\/strong>: Performansl\u0131 kayd\u0131rma deneyimleri ve kayd\u0131rma tabanl\u0131 animasyonlar i\u00e7in \u00f6zel olarak tasarlanm\u0131\u015f bir k\u00fct\u00fcphanedir. Genellikle \"smooth scroll\" (ak\u0131c\u0131 kayd\u0131rma) efektleriyle birlikte kullan\u0131l\u0131r ve kayd\u0131rma ilerlemesini daha hassas bir \u015fekilde kontrol etmeye olanak tan\u0131r.<\/p>\nPratik Uygulama \u00d6rnekleri<\/h3>\n
Paralaks Etkisi<\/h4>\n
const parallaxBg = document.querySelector('.parallax-background');\n\nfunction applyParallax() {\n const scrollPosition = window.scrollY;\n \/\/ Arka plan\u0131 kayd\u0131rma h\u0131z\u0131n\u0131n yar\u0131s\u0131 kadar hareket ettir\n parallaxBg.style.transform = translateY(${scrollPosition * 0.5}px)<\/code>;\n}\n\nlet ticking = false;\nwindow.addEventListener('scroll', () => {\n if (!ticking) {\n window.requestAnimationFrame(() => {\n applyParallax();\n ticking = false;\n });\n ticking = true;\n }\n});<\/code><\/pre>\n.parallax-background<\/code> s\u0131n\u0131f\u0131na sahip elementin dikey konumu, kayd\u0131rma pozisyonunun yar\u0131s\u0131 kadar de\u011fi\u015ftirilir. B\u00f6ylece arka plan, \u00f6n plana g\u00f6re daha yava\u015f hareket eder. Daha karma\u015f\u0131k paralaks efektleri i\u00e7in, farkl\u0131 katmanlara farkl\u0131 h\u0131zlar atanabilir veya elementin viewport'a g\u00f6re konumu dikkate al\u0131narak daha dinamik hesaplamalar yap\u0131labilir.<\/p>\nSticky Elemanlar ve Animasyonlar\u0131<\/h4>\n
position: sticky<\/code> \u00f6zelli\u011fi bu i\u015flevi kolayca sa\u011flar, ancak JavaScript ile daha karma\u015f\u0131k animasyonlar ve ko\u015fullar eklenebilir.<\/p>\nconst header = document.querySelector('header');\nconst stickyPoint = header.offsetTop; \/\/ Header'\u0131n ba\u015flang\u0131\u00e7taki dikey konumu\n\nfunction handleStickyHeader() {\n if (window.scrollY >= stickyPoint) {\n header.classList.add('is-sticky');\n } else {\n header.classList.remove('is-sticky');\n }\n}\n\nlet ticking = false;\nwindow.addEventListener('scroll', () => {\n if (!ticking) {\n window.requestAnimationFrame(() => {\n handleStickyHeader();\n ticking = false;\n });\n ticking = true;\n }\n});<\/code><\/pre>\nheader {\n position: relative;\n padding: 20px;\n background-color: #f0f0f0;\n transition: background-color 0.3s ease;\n}\n\nheader.is-sticky {\n position: fixed;\n top: 0;\n width: 100%;\n background-color: #333;\n color: white;\n z-index: 1000;\n}<\/code><\/pre>\nis-sticky<\/code> s\u0131n\u0131f\u0131 eklendi\u011finde header'\u0131n arka plan rengi de\u011fi\u015fir ve position: fixed<\/code> ile sabitlenir.<\/p>\nG\u00f6rsel Hikaye Anlat\u0131m\u0131<\/h4>\n
En \u0130yi Uygulamalar ve Dikkat Edilmesi Gerekenler<\/h3>\n
Eri\u015filebilirlik (Accessibility)<\/h4>\n
prefers-reduced-motion<\/code> Media \u00d6zelli\u011fi<\/strong>: Bu CSS media \u00f6zelli\u011fi, kullan\u0131c\u0131n\u0131n i\u015fletim sistemi ayarlar\u0131nda hareketli animasyonlar\u0131 tercih etmedi\u011fini belirtip belirtmedi\u011fini kontrol etmenizi sa\u011flar. Bu \u00f6zelli\u011fi kullanarak, animasyonlar\u0131 azaltabilir veya tamamen devre d\u0131\u015f\u0131 b\u0131rakabilirsiniz:<\/p>\n@media (prefers-reduced-motion: reduce) {\n .animated-element {\n \/ Animasyonlar\u0131 devre d\u0131\u015f\u0131 b\u0131rak veya basitle\u015ftir <\/em>\/\n transition: none !important;\n animation: none !important;\n transform: none !important;\n opacity: 1 !important; \/ G\u00f6r\u00fcn\u00fcr olmas\u0131n\u0131 sa\u011fla <\/em>\/\n }\n }<\/code><\/pre>\nwindow.matchMedia('(prefers-reduced-motion: reduce)').matches<\/code>.
\n* Anlaml\u0131 \u0130\u00e7erik<\/strong>: Animasyonlar sadece g\u00f6rsel bir s\u00fcs olmamal\u0131, i\u00e7eri\u011fin anla\u015f\u0131lmas\u0131na katk\u0131da bulunmal\u0131d\u0131r. Animasyonlar olmadan da i\u00e7eri\u011fin tam olarak anla\u015f\u0131labilir oldu\u011fundan emin olun.
\n* Kontrol Se\u00e7enekleri<\/strong>: Karma\u015f\u0131k veya uzun s\u00fcreli animasyonlar i\u00e7in, kullan\u0131c\u0131lara animasyonu durdurma, oynatma veya atlama se\u00e7enekleri sunmak iyi bir uygulamad\u0131r.<\/p>\nMobil Cihazlar<\/h4>\n
transform<\/code> ve opacity<\/code> kullan\u0131m\u0131 mobil cihazlarda daha da \u00f6nemlidir.
\n* Viewport Boyutu De\u011fi\u015fimi<\/strong>: Mobil taray\u0131c\u0131larda adres \u00e7ubu\u011fu gibi aray\u00fcz \u00f6\u011feleri kayd\u0131rma s\u0131ras\u0131nda g\u00f6r\u00fcn\u00fcp kaybolabilir, bu da window.innerHeight<\/code> de\u011ferini de\u011fi\u015ftirebilir. Bu durum, kayd\u0131rma y\u00fczdesi veya element konumland\u0131rma hesaplamalar\u0131n\u0131 etkileyebilir. Bu senaryoyu g\u00f6z \u00f6n\u00fcnde bulundurarak testler yap\u0131n.
\n* Dokunmatik Etkile\u015fimler<\/strong>: Dokunmatik kayd\u0131rma, fare tekerle\u011fiyle kayd\u0131rmaya g\u00f6re farkl\u0131 bir his verir. Animasyonlar\u0131n\u0131z\u0131n dokunmatik kayd\u0131rma ile de do\u011fal ve ak\u0131c\u0131 hissetti\u011finden emin olun.<\/p>\nSEO (Arama Motoru Optimizasyonu)<\/h4>\n
\n* Sayfa H\u0131z\u0131<\/strong>: A\u015f\u0131r\u0131 animasyonlar veya k\u00f6t\u00fc optimize edilmi\u015f JavaScript kodlar\u0131 sayfa y\u00fckleme s\u00fcresini art\u0131rabilir. Sayfa h\u0131z\u0131, SEO s\u0131ralamas\u0131 i\u00e7in \u00f6nemli bir fakt\u00f6rd\u00fcr.<\/p>\nTaray\u0131c\u0131 Uyumlulu\u011fu<\/h4>\n
Intersection Observer<\/code>) ve CSS \u00f6zelliklerinin t\u00fcm hedef taray\u0131c\u0131larda desteklendi\u011finden emin olun. Gerekirse, eski taray\u0131c\u0131lar i\u00e7in \"polyfill\" veya \"fallback\" \u00e7\u00f6z\u00fcmleri sunun. Can I use... gibi kaynaklar, taray\u0131c\u0131 deste\u011fini kontrol etmek i\u00e7in harika ara\u00e7lard\u0131r.<\/p>\nSonu\u00e7<\/h3>\n
Intersection Observer API<\/code> gibi modern ara\u00e7lar, performans\u0131 \u00f6nemli \u00f6l\u00e7\u00fcde art\u0131r\u0131rken, GSAP ScrollTrigger gibi k\u00fct\u00fcphaneler, karma\u015f\u0131k senaryolar\u0131 daha kolay ve verimli bir \u015fekilde y\u00f6netmenizi sa\u011flar.<\/p>\nscroll-timeline<\/code> gibi deneysel \u00f6zelliklerin daha yayg\u0131nla\u015fmas\u0131yla, kayd\u0131rma tabanl\u0131 animasyonlar\u0131n geli\u015ftirilmesi daha da kolayla\u015facak ve performanslar\u0131 artacakt\u0131r. Bu alandaki geli\u015fmeleri takip ederek, web sitelerinizi her zaman en son ve en iyi uygulamalarla g\u00fcncel tutabilirsiniz. Yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 serbest b\u0131rak\u0131n ve kullan\u0131c\u0131lar\u0131n\u0131za unutulmaz web deneyimleri sunun!<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript ile Kayd\u0131rma Tabanl\u0131 Animasyonlar\u0131 Uygulama\nGiri\u015f\nWeb sitelerinde kullan\u0131c\u0131 deneyimini zenginle\u015ftiren ve etkile\u015fimi art\u0131ran unsur","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":[129],"tags":[],"class_list":{"0":"post-32514","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n