{"id":18290,"date":"2025-04-16T08:45:16","date_gmt":"2025-04-16T05:45:16","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/"},"modified":"2025-04-16T08:45:16","modified_gmt":"2025-04-16T05:45:16","slug":"anime-js-ile-carpraz-kaydirici-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/","title":{"rendered":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma"},"content":{"rendered":"<p>Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma<\/p>\n<p>Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim.  Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r.  \u00d6ncelikle, Anime.js&#8217;nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m.  Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup,  web geli\u015ftirmede  kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar.  Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.<\/p>\n<p>Bu makalede,  bir \u00f6rnek proje \u00fczerinden ilerleyece\u011fiz.  \u00d6rne\u011fin,  bir dizi g\u00f6rseli \u00e7arpraz bir \u015fekilde kayd\u0131rarak, her bir g\u00f6rselin \u00f6n plana \u00e7\u0131kmas\u0131n\u0131 sa\u011flayaca\u011f\u0131z. Bunun i\u00e7in, HTML, CSS ve JavaScript&#8217;in yan\u0131 s\u0131ra Anime.js&#8217;yi kullanaca\u011f\u0131z.  \u00d6ncelikle HTML yap\u0131m\u0131z\u0131 olu\u015ftural\u0131m. Her bir g\u00f6rsel i\u00e7in bir div eleman\u0131 kullanaca\u011f\u0131z ve bunlara CSS ile stil verece\u011fiz.<\/p>\n<h2>HTML Yap\u0131s\u0131<\/h2>\n<pre><code class=\"language-html\">\n&lt;div class=\"slider\"&gt;\n  &lt;div class=\"slide\"&gt;&lt;img src=\"resim1.jpg\" alt=\"Resim 1\"&gt;&lt;\/div&gt;\n  &lt;div class=\"slide\"&gt;&lt;img src=\"resim2.jpg\" alt=\"Resim 2\"&gt;&lt;\/div&gt;\n  &lt;div class=\"slide\"&gt;&lt;img src=\"resim3.jpg\" alt=\"Resim 3\"&gt;&lt;\/div&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n<p>Ard\u0131ndan,  CSS ile g\u00f6rsellerin konumland\u0131r\u0131lmas\u0131n\u0131 ve stilini ayarlayaca\u011f\u0131z.  Bu k\u0131s\u0131mda,  g\u00f6rsellerin birbirinin \u00fcst\u00fcne gelecek \u015fekilde konumland\u0131r\u0131lmas\u0131 ve animasyon i\u00e7in gerekli olan baz\u0131 temel stiller eklenmelidir.  Ayr\u0131ca, slider&#8217;\u0131n genel g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc de bu k\u0131s\u0131mda d\u00fczenleyebilirsiniz.<\/p>\n<h2>CSS Stili<\/h2>\n<pre><code class=\"language-css\">\n.slider {\n  width: 600px;\n  height: 400px;\n  perspective: 1000px; \/* 3D efekti i\u00e7in gerekli *\/\n  overflow: hidden;\n}\n\n.slide {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  opacity: 0; \/* Ba\u015flang\u0131\u00e7ta g\u00f6r\u00fcnmez *\/\n  transition: opacity 0.5s ease; \/* Ge\u00e7i\u015f efekti *\/\n}\n\n.slide img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n\n\/* Animasyon durumundaki stilleri ekleyin (JavaScript'te Anime.js ile ayarlan\u0131r) *\/\n<\/code><\/pre>\n<p>Son olarak,  JavaScript ve Anime.js k\u00fct\u00fcphanesini kullanarak animasyonumuzu olu\u015fturaca\u011f\u0131z.  Bu ad\u0131mda,  her bir slide&#8217;\u0131n belirli bir zaman aral\u0131\u011f\u0131nda \u00e7arpraz bir \u015fekilde kaymas\u0131n\u0131 sa\u011flayaca\u011f\u0131z.  Anime.js&#8217;nin timeline \u00f6zelli\u011fi,  animasyonlar\u0131n s\u0131ralamas\u0131n\u0131 ve senkronizasyonunu kolayla\u015ft\u0131r\u0131r.<\/p>\n<h2>Anime.js ile Animasyon<\/h2>\n<pre><code class=\"language-javascript\">\nconst slides = document.querySelectorAll('.slide');\nlet timeline = anime.timeline({\n  duration: 1000,\n  easing: 'easeOutExpo'\n});\n\nslides.forEach((slide, index) => {\n  timeline.add({\n    targets: slide,\n    opacity: 1,\n    translateY: [index * 50, 0], \/\/ Her slide'\u0131n y ekseni hareketini de\u011fi\u015ftirin\n    translateX: [index * -50, 0], \/\/ Her slide'\u0131n x ekseni hareketini de\u011fi\u015ftirin\n    delay: index * 500, \/\/ Her slide'\u0131n gecikmesini ayarlay\u0131n\n    rotateZ: [index*10,0] \/\/ 3D d\u00f6nd\u00fcrme ekleyin.\n  });\n});\n<\/code><\/pre>\n<p>Bu kod,  her slide&#8217;\u0131n belirli bir s\u00fcreyle ve belirli bir y ekseninde ve x ekseninde kaymas\u0131n\u0131 sa\u011flayacakt\u0131r.  delay \u00f6zelli\u011fi,  slide&#8217;lar\u0131n ard\u0131\u015f\u0131k olarak g\u00f6r\u00fcnmesini sa\u011flar.  Daha karma\u015f\u0131k animasyonlar i\u00e7in, Anime.js&#8217;nin di\u011fer \u00f6zelliklerini de kullanabilirsiniz.  \u00d6rne\u011fin,  easing \u00f6zelli\u011fi ile animasyonun h\u0131z\u0131n\u0131 ve ak\u0131c\u0131l\u0131\u011f\u0131n\u0131 ayarlayabilirsiniz.  Ayr\u0131ca,  rotateX, rotateY gibi \u00f6zellikleri kullanarak 3 boyutlu d\u00f6n\u00fc\u015f animasyonlar\u0131 da ekleyebilirsiniz.  Unutmay\u0131n ki bu sadece bir \u00f6rnek.  Kendi ihtiya\u00e7lar\u0131n\u0131za g\u00f6re kodlar\u0131 \u00f6zelle\u015ftirebilirsiniz.<\/p>\n<p>Bu makalede, Anime.js kullanarak nas\u0131l \u00e7arpraz bir kayd\u0131r\u0131c\u0131 olu\u015fturabilece\u011finizi g\u00f6sterdim.  Umar\u0131m bu makale size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi ve \u00f6rnek i\u00e7in, <a href=\"https:\/\/animejs.com\/\">Anime.js resmi dok\u00fcman\u0131na<\/a> g\u00f6z atabilirsiniz.  Ayr\u0131ca, web geli\u015ftirme ile ilgili daha fazla i\u00e7eri\u011fe <a href=\"https:\/\/fatihsoysal.com\">kendi web sitemden<\/a> ula\u015fabilirsiniz.<\/p>\n<p>#Etiketler: Anime.js, \u00c7arpraz Kayd\u0131r\u0131c\u0131, Diagonal Slider, JavaScript, Animasyon, Web Geli\u015ftirme, HTML, CSS, Kayd\u0131r\u0131c\u0131, Slider,  Web Tasar\u0131m\u0131, Fatih Soysal<\/p>\n","protected":false},"excerpt":{"rendered":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz&hellip;","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":[1],"tags":[],"class_list":{"0":"post-18290","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-genel","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>Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js&#039;nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.\" \/>\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\/anime-js-ile-carpraz-kaydirici-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js&#039;nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-16T05:45:16+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=\"3 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma\",\"datePublished\":\"2025-04-16T05:45:16+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\"},\"wordCount\":494,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\",\"name\":\"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-16T05:45:16+00:00\",\"description\":\"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js'nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma\"}]},{\"@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":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js'nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.","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\/anime-js-ile-carpraz-kaydirici-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma","og_description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js'nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.","og_url":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-16T05:45:16+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"3 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma","datePublished":"2025-04-16T05:45:16+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/"},"wordCount":494,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/","name":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-16T05:45:16+00:00","description":"Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Anime.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir \u00e7arpraz kayd\u0131r\u0131c\u0131 (diagonal slider) olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu teknik, web sitenize dinamik ve modern bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131za yard\u0131mc\u0131 olacakt\u0131r. \u00d6ncelikle, Anime.js'nin ne oldu\u011funu ve neden kullan\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131klayal\u0131m. Anime.js, JavaScript tabanl\u0131 bir animasyon k\u00fct\u00fcphanesi olup, web geli\u015ftirmede kolay ve ak\u0131c\u0131 animasyonlar olu\u015fturmay\u0131 sa\u011flar. Kullan\u0131m\u0131 olduk\u00e7a basittir ve karma\u015f\u0131k animasyonlar i\u00e7in bile temiz ve okunabilir bir kod yap\u0131s\u0131 sunar.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/anime-js-ile-carpraz-kaydirici-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Anime.js ile \u00c7arpraz Kayd\u0131r\u0131c\u0131 Olu\u015fturma"}]},{"@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\/18290","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=18290"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/18290\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=18290"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=18290"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=18290"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}