{"id":17251,"date":"2025-04-05T13:45:14","date_gmt":"2025-04-05T10:45:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/"},"modified":"2025-04-05T13:45:14","modified_gmt":"2025-04-05T10:45:14","slug":"html-css-ve-js-ile-parcacik-efektleri-olusturma","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/","title":{"rendered":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma"},"content":{"rendered":"<p><body><\/p>\n<p>HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma<\/p>\n<p>Merhaba!  Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz.  \u00d6ncelikle,  projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.  Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz.  Son olarak ise, JavaScript&#8217;in g\u00fcc\u00fcyle  par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.<\/p>\n<h2>HTML Yap\u0131s\u0131<\/h2>\n<p>\u0130lk ad\u0131m olarak,  par\u00e7ac\u0131klar\u0131m\u0131z\u0131n yerle\u015ftirilece\u011fi bir <code>canvas<\/code> elementi olu\u015fturmam\u0131z gerekiyor. Bu element,  JavaScript ile manip\u00fcle edilecek ve par\u00e7ac\u0131klar burada canland\u0131r\u0131lacakt\u0131r.<\/p>\n<pre><code class=\"language-html\">\n&lt;canvas id=\"particleCanvas\"&gt;&lt;\/canvas&gt;\n<\/code><\/pre>\n<h2>CSS Stilleri<\/h2>\n<p>\u015eimdi,  <code>canvas<\/code> elementimizin boyutunu ve konumunu  CSS ile ayarlayal\u0131m.  Bu ad\u0131m,  par\u00e7ac\u0131k efektinin g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc kontrol etmemizi sa\u011flar.  \u00d6rne\u011fin,  tam ekran bir efekt i\u00e7in <code>width<\/code> ve <code>height<\/code> de\u011ferlerini  <code>100%<\/code> olarak belirleyebilirsiniz.<\/p>\n<pre><code class=\"language-css\">\n#particleCanvas {\n  width: 500px;\n  height: 300px;\n  background-color: #f0f0f0; \/* Arka plan rengi *\/\n}\n<\/code><\/pre>\n<h2>JavaScript ile Par\u00e7ac\u0131k Animasyonu<\/h2>\n<p>En \u00f6nemli ad\u0131m, JavaScript ile par\u00e7ac\u0131klar\u0131n davran\u0131\u015flar\u0131n\u0131 tan\u0131mlamakt\u0131r.  Bu k\u0131s\u0131mda,  par\u00e7ac\u0131klar\u0131n konumlar\u0131n\u0131, h\u0131zlar\u0131n\u0131, renklerini ve di\u011fer \u00f6zelliklerini belirleyece\u011fiz.  Ayr\u0131ca,  par\u00e7ac\u0131klar\u0131n  ekranda nas\u0131l hareket edece\u011fini ve birbirleriyle nas\u0131l etkile\u015fime girece\u011fini de kontrol edece\u011fiz.  A\u015fa\u011f\u0131daki kod \u00f6rne\u011fi, basit bir par\u00e7ac\u0131k animasyonu olu\u015fturmak i\u00e7in temel bir yakla\u015f\u0131m\u0131 g\u00f6stermektedir.  Bu \u00f6rnekte, rastgele konumlarda olu\u015fan ve yava\u015f\u00e7a a\u015fa\u011f\u0131 do\u011fru hareket eden par\u00e7ac\u0131klar g\u00f6rebilirsiniz.  Daha karma\u015f\u0131k etkiler i\u00e7in,  fizik motorlar\u0131 veya daha geli\u015fmi\u015f algoritmalar kullanabilirsiniz. <\/p>\n<pre><code class=\"language-javascript\">\nconst canvas = document.getElementById('particleCanvas');\nconst ctx = canvas.getContext('2d');\n\nconst numParticles = 100;\nconst particles = [];\n\nclass Particle {\n  constructor(x, y, size, color) {\n    \/\/ ... Particle \u00f6zellikleri ve metotlar\u0131\n  }\n  update() {\n    \/\/ ... Par\u00e7ac\u0131k g\u00fcncelleme i\u015flemleri\n  }\n  draw() {\n    \/\/ ... Par\u00e7ac\u0131k \u00e7izim i\u015flemleri\n  }\n}\n\n\n\/\/ Par\u00e7ac\u0131klar olu\u015fturuluyor ve animasyon ba\u015flat\u0131l\u0131yor.\nfor (let i = 0; i < numParticles; i++) {\n  particles.push(new Particle(Math.random() * canvas.width, \n                              Math.random() * canvas.height,\n                              Math.random() * 5 + 1,\n                              rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})));\n}\n\nfunction animate() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  particles.forEach(particle => {\n    particle.update();\n    particle.draw();\n  });\n  requestAnimationFrame(animate);\n}\n\nanimate();\n<\/code><\/pre>\n<p>Bu \u00f6rnek, basit bir ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.  Daha karma\u015f\u0131k efektler olu\u015fturmak i\u00e7in,  par\u00e7ac\u0131klar\u0131n h\u0131z\u0131n\u0131, ivmesini, y\u00f6n\u00fcn\u00fc, \u00e7arp\u0131\u015fmalar\u0131n\u0131 ve di\u011fer \u00f6zelliklerini ince ayarlayabilirsiniz.  Ayr\u0131ca,  farkl\u0131 \u015fekiller, renkler ve animasyonlar kullanarak yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 konu\u015fturabilirsiniz.  Daha fazla bilgi ve geli\u015fmi\u015f \u00f6rnekler i\u00e7in <a href=\"https:\/\/dev.to\/prince_beec5ccde00b7c6c73\/particles-effect-using-the-html-css-and-js-577f\" target=\"_blank\">bu kayna\u011fa<\/a> g\u00f6z atabilirsiniz. Daha geli\u015fmi\u015f etkiler i\u00e7in fizik k\u00fct\u00fcphanelerinden de faydalanabilirsiniz.  \u00d6rne\u011fin,  Matter.js gibi k\u00fct\u00fcphaneler,  par\u00e7ac\u0131klar\u0131n ger\u00e7ek\u00e7i fiziksel davran\u0131\u015flar\u0131n\u0131 sim\u00fcle etmenize olanak tan\u0131r.  Bu k\u00fct\u00fcphaneler par\u00e7ac\u0131klar\u0131n birbirleri ile etkile\u015fimlerini ger\u00e7ek\u00e7i bir \u015fekilde sim\u00fcle etmenizi sa\u011flayacakt\u0131r.<\/p>\n<p>Bu makalede ele ald\u0131\u011f\u0131m\u0131z konular,  HTML, CSS ve JavaScript kullanarak par\u00e7ac\u0131k efektleri olu\u015fturman\u0131n temel ad\u0131mlar\u0131n\u0131 kapsamaktad\u0131r.  Umar\u0131m bu bilgiler sizin i\u00e7in faydal\u0131 olmu\u015ftur.  Daha fazla web geli\u015ftirme i\u00e7eri\u011fi i\u00e7in <a href=\"https:\/\/fatihsoysal.com\" target=\"_blank\">web sitemi<\/a> ziyaret edebilirsiniz.<\/p>\n<p>#Etiketler<br \/>\n#Par\u00e7ac\u0131kEfektleri #HTML #CSS #JavaScript #WebGeli\u015ftirme #Animasyon #Kod\u00d6rnekleri #Canvas #ParticleEffect #WebAnimasyon<br \/>\n<\/body><br \/>\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k&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-17251","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>HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma<\/title>\n<meta name=\"description\" content=\"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript&#039;in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.\" \/>\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\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma\" \/>\n<meta property=\"og:description\" content=\"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript&#039;in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-04-05T10:45:14+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\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma\",\"datePublished\":\"2025-04-05T10:45:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\"},\"wordCount\":476,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\",\"name\":\"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-04-05T10:45:14+00:00\",\"description\":\"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript'in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri 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":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma","description":"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript'in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.","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\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma","og_description":"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript'in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.","og_url":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-04-05T10:45:14+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\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma","datePublished":"2025-04-05T10:45:14+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/"},"wordCount":476,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/","url":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/","name":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri Olu\u015fturma","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-04-05T10:45:14+00:00","description":"Merhaba! Bu makalede, HTML, CSS ve JavaScript kullanarak etkileyici par\u00e7ac\u0131k efektleri olu\u015fturmay\u0131 ad\u0131m ad\u0131m \u00f6\u011frenece\u011fiz. \u00d6ncelikle, projemizin temel yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m. Ard\u0131ndan, CSS ile par\u00e7ac\u0131klar\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc \u015fekillendirece\u011fiz. Son olarak ise, JavaScript'in g\u00fcc\u00fcyle par\u00e7ac\u0131klar\u0131n hareketlerini ve etkile\u015fimlerini y\u00f6netece\u011fiz.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-js-ile-parcacik-efektleri-olusturma\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML, CSS ve JS ile Par\u00e7ac\u0131k Efektleri 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\/17251","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=17251"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/17251\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=17251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=17251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=17251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}