{"id":3921,"date":"2024-11-14T20:30:12","date_gmt":"2024-11-14T17:30:12","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/"},"modified":"2024-11-14T20:30:12","modified_gmt":"2024-11-14T17:30:12","slug":"html-css-ve-gsap-ile-goruntu-aciklama-animasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/","title":{"rendered":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu"},"content":{"rendered":"<p>HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu<\/p>\n<p>Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in  animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim. <\/p>\n<h2>GSAP Nedir?<\/h2>\n<p>GSAP, JavaScript&#8217;in en g\u00fc\u00e7l\u00fc ve kullan\u0131m\u0131 kolay animasyon k\u00fct\u00fcphanesidir. GSAP, web sitenize benzersiz ve etkileyici animasyonlar eklemeyi kolayla\u015ft\u0131r\u0131r. GSAP&#8217;nin baz\u0131 avantajlar\u0131 \u015funlard\u0131r: <\/p>\n<ul>\n<li>Kolay kullan\u0131m ve g\u00fc\u00e7l\u00fc \u00f6zellikleri.<\/li>\n<li>Web siteniz i\u00e7in ak\u0131c\u0131 ve sofistike animasyonlar olu\u015fturma esnekli\u011fi.<\/li>\n<li>Mobil uyumluluk.<\/li>\n<li>\u00c7e\u015fitli animasyon efektleri.<\/li>\n<li>G\u00fcvenilir ve iyi dok\u00fcmante edilmi\u015f bir k\u00fct\u00fcphane.<\/li>\n<\/ul>\n<h2>G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu Nas\u0131l Olu\u015fturulur?<\/h2>\n<p>\u015eimdi, GSAP, CSS ve HTML kullanarak basit bir g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonu olu\u015ftural\u0131m. <\/p>\n<h3>1. HTML&#8217;yi Olu\u015fturma<\/h3>\n<p>\u00d6ncelikle, bir g\u00f6r\u00fcnt\u00fc ve animasyonun uygulanaca\u011f\u0131 bir HTML yap\u0131s\u0131 olu\u015fturmam\u0131z gerekiyor.  <\/p>\n<p>&#8220;`html<br \/>\n<!DOCTYPE html><br \/>\n<html lang=\"tr\"><br \/>\n<head><br \/>\n  <meta charset=\"UTF-8\"><br \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><br \/>\n  <title>G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu<\/title>\n  <link rel=\"stylesheet\" href=\"style.css\">\n<\/head><br \/>\n<body><\/p>\n<div class=\"container\">\n<div class=\"image-container\">\n      <img decoding=\"async\" src=\"images\/resim.jpg\" alt=\"G\u00f6r\u00fcnt\u00fc\">\n    <\/div>\n<\/p><\/div>\n<p>  <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/3.10.4\/gsap.min.js\"><\/script><br \/>\n  <script src=\"script.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><br \/>\n&#8220;`<\/p>\n<h3>2. CSS&#8217;yi Olu\u015fturma<\/h3>\n<p>Bu ad\u0131mda, g\u00f6r\u00fcnt\u00fcn\u00fcn ve kapsay\u0131c\u0131n\u0131n stilini tan\u0131mlayan bir CSS dosyas\u0131 olu\u015fturmam\u0131z gerekiyor. <\/p>\n<p>&#8220;`css<br \/>\n.container {<br \/>\n  width: 100%;<br \/>\n  height: 100vh;<br \/>\n  display: flex;<br \/>\n  justify-content: center;<br \/>\n  align-items: center;<br \/>\n}<\/p>\n<p>.image-container {<br \/>\n  width: 500px;<br \/>\n  height: 300px;<br \/>\n  overflow: hidden;<br \/>\n  position: relative;<br \/>\n}<\/p>\n<p>.image-container img {<br \/>\n  width: 100%;<br \/>\n  height: 100%;<br \/>\n  position: absolute;<br \/>\n  top: 0;<br \/>\n  left: 0;<br \/>\n  transform-origin: 50% 100%;<br \/>\n}<br \/>\n&#8220;`<\/p>\n<h3>3. GSAP ile Animasyon Ekleme<\/h3>\n<p>Son olarak, GSAP&#8217;yi kullanarak animasyon olu\u015fturmak i\u00e7in bir JavaScript dosyas\u0131 olu\u015fturmam\u0131z gerekiyor. <\/p>\n<p>&#8220;`js<br \/>\ngsap.from(&#8220;.image-container img&#8221;, {<br \/>\n  y: 100,<br \/>\n  duration: 1,<br \/>\n  ease: &#8220;power4.out&#8221;,<br \/>\n  opacity: 0,<br \/>\n  stagger: 0.2,<br \/>\n});<br \/>\n&#8220;`<\/p>\n<p>Bu kod, g\u00f6r\u00fcnt\u00fcye animasyon uygulayarak g\u00f6r\u00fcnt\u00fcn\u00fcn ba\u015flang\u0131\u00e7ta yukar\u0131da ve opak bir \u015fekilde g\u00f6r\u00fcnmesini sa\u011flar. Daha sonra 1 saniye boyunca a\u015fa\u011f\u0131ya kayar ve opakl\u0131\u011f\u0131 1&#8217;e gelir. <\/p>\n<h2>GSAP Animasyonlar\u0131n\u0131n \u00d6zelle\u015ftirilmesi<\/h2>\n<p>GSAP kullanarak animasyonlar \u00f6zelle\u015ftirilebilir. <\/p>\n<ul>\n<li>**S\u00fcre (duration):** Animasyonun s\u00fcresini ayarlay\u0131n.<\/li>\n<li>**Kolayl\u0131k (ease):** Animasyonun h\u0131z\u0131n\u0131 ve zamanlamas\u0131n\u0131 kontrol edin.<\/li>\n<li>**Ge\u00e7ikme (delay):** Animasyonun ba\u015flamadan \u00f6nce bekledi\u011fi s\u00fcreyi ayarlay\u0131n.<\/li>\n<li>**Tekrarlama (repeat):** Animasyonun ka\u00e7 kez tekrarlanaca\u011f\u0131n\u0131 belirleyin.<\/li>\n<li>**Y\u00f6n (direction):** Animasyonun ileri veya geri oynat\u0131lmas\u0131n\u0131 kontrol edin.<\/li>\n<li>**Durdurma (pause):** Animasyonu durdurun ve devam ettirin.<\/li>\n<\/ul>\n<h2>Ek \u00d6rnekler ve \u0130pu\u00e7lar\u0131<\/h2>\n<p>Bu basit \u00f6rne\u011fe ek olarak GSAP ile bir\u00e7ok farkl\u0131 animasyon olu\u015fturmak m\u00fcmk\u00fcnd\u00fcr.  <\/p>\n<ul>\n<li>G\u00f6r\u00fcnt\u00fcy\u00fc soldan sa\u011fa veya sa\u011fdan sola kayd\u0131rarak a\u00e7abilirsiniz.<\/li>\n<li>G\u00f6r\u00fcnt\u00fcy\u00fc d\u00f6nd\u00fcrerek veya \u00f6l\u00e7eklendirerek animasyon olu\u015fturabilirsiniz.<\/li>\n<li>Birden fazla animasyon ekleyerek daha karma\u015f\u0131k etkiler yaratabilirsiniz.<\/li>\n<\/ul>\n<p> GSAP hakk\u0131nda daha fazla bilgi edinmek ve ek \u00f6rnekler g\u00f6rmek i\u00e7in <a href=\"https:\/\/greensock.com\/gsap\/\">GSAP web sitesini<\/a> ziyaret edebilirsiniz. <\/p>\n<h2>Sonu\u00e7<\/h2>\n<p>GSAP kullanarak web sitenize g\u00f6z al\u0131c\u0131 animasyonlar eklemek olduk\u00e7a kolayd\u0131r. GSAP&#8217;nin sundu\u011fu  esneklik ve \u00f6zelle\u015ftirme se\u00e7enekleri ile hayal g\u00fcc\u00fcn\u00fcz\u00fc s\u0131n\u0131rlamadan  \u00e7arp\u0131c\u0131 web animasyonlar\u0131 olu\u015fturabilirsiniz. <\/p>\n<p> Daha fazla web geli\u015ftirme ipucu ve kaynak i\u00e7in <a href=\"https:\/\/fatihsoysal.com\/\">fatihsoysal.com<\/a> web sitesini ziyaret edin.<\/p>\n<p>#Etiketler<br \/>\nGSAP, Animasyon, G\u00f6r\u00fcnt\u00fc, HTML, CSS, Web Tasar\u0131m\u0131, JavaScript, Animasyon K\u00fct\u00fcphanesi, Interaktiflik, \u00d6zelle\u015ftirme, Kolayl\u0131k,  G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama<\/p>\n","protected":false},"excerpt":{"rendered":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini&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-3921","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 GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu<\/title>\n<meta name=\"description\" content=\"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.\" \/>\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-gsap-ile-goruntu-aciklama-animasyonu\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu\" \/>\n<meta property=\"og:description\" content=\"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-14T17:30:12+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-gsap-ile-goruntu-aciklama-animasyonu\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu\",\"datePublished\":\"2024-11-14T17:30:12+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\"},\"wordCount\":564,\"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-gsap-ile-goruntu-aciklama-animasyonu\/#respond\"]}],\"copyrightYear\":\"2024\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\",\"name\":\"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2024-11-14T17:30:12+00:00\",\"description\":\"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu\"}]},{\"@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 GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu","description":"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.","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-gsap-ile-goruntu-aciklama-animasyonu\/","og_locale":"tr_TR","og_type":"article","og_title":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu","og_description":"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.","og_url":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2024-11-14T17:30:12+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-gsap-ile-goruntu-aciklama-animasyonu\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu","datePublished":"2024-11-14T17:30:12+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/"},"wordCount":564,"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-gsap-ile-goruntu-aciklama-animasyonu\/#respond"]}],"copyrightYear":"2024","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/","url":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/","name":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2024-11-14T17:30:12+00:00","description":"Web tasar\u0131m\u0131nda g\u00f6rsel \u00e7ekicilik ve interaktiflik \u00e7ok \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n ilgisini \u00e7ekmek ve web sitenizin esteti\u011fini art\u0131rmak i\u00e7in animasyonlar b\u00fcy\u00fck bir rol oynar. GSAP (GreenSock Animation Platform) kullanarak CSS ve HTML ile etkile\u015fimli g\u00f6r\u00fcnt\u00fc a\u00e7\u0131klama animasyonlar\u0131 nas\u0131l olu\u015fturabilece\u011finizi ke\u015ffedelim.","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/html-css-ve-gsap-ile-goruntu-aciklama-animasyonu\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"HTML, CSS ve GSAP ile G\u00f6r\u00fcnt\u00fc A\u00e7\u0131klama Animasyonu"}]},{"@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\/3921","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=3921"}],"version-history":[{"count":0,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/3921\/revisions"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=3921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=3921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=3921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}