{"id":18291,"date":"2025-04-16T09:00:14","date_gmt":"2025-04-16T06:00:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-dikey-zoomlu-slayt-gosterisi\/"},"modified":"2025-04-16T09:00:14","modified_gmt":"2025-04-16T06:00:14","slug":"gsap-ile-dikey-zoomlu-slayt-gosterisi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/gsap-ile-dikey-zoomlu-slayt-gosterisi\/","title":{"rendered":"GSAP ile Dikey Zoomlu Slayt G\u00f6sterisi"},"content":{"rendered":"

GSAP ile Dikey Zoomlu Slayt G\u00f6sterisi<\/p>\n

Merhaba, Fatih Soysal burada. Bug\u00fcn sizlere GreenSock Animation Platform (GSAP) k\u00fct\u00fcphanesini kullanarak nas\u0131l dikey zoomlu bir slayt g\u00f6sterisi olu\u015fturabilece\u011finizi detayl\u0131 bir \u015fekilde anlataca\u011f\u0131m. Bu teknik, web sitenize etkileyici bir g\u00f6rsellik katman\u0131n harika bir yoludur. \u00d6zellikle, \u00fcr\u00fcn tan\u0131t\u0131mlar\u0131, portfolyolar veya g\u00f6rsel odakl\u0131 i\u00e7erikler i\u00e7in ideal bir \u00e7\u00f6z\u00fcm sunar.<\/p>\n

\u00d6ncelikle, GSAP k\u00fct\u00fcphanesini projenize eklemeniz gerekiyor. Bunu, CDN yoluyla veya k\u00fct\u00fcphaneyi indirerek yapabilirsiniz. CDN kullan\u0131m\u0131 daha kolayd\u0131r, ancak indirme y\u00f6ntemi daha fazla kontrol imkan\u0131 sa\u011flar. K\u00fct\u00fcphaneyi dahil ettikten sonra, biraz JavaScript koduyla harika animasyonlar olu\u015fturabilirsiniz. A\u015fa\u011f\u0131da, temel HTML yap\u0131m\u0131z\u0131 g\u00f6receksiniz.<\/p>\n

\n<div class=\"slideshow\">\n  <div class=\"slide\"><img src=\"image1.jpg\" alt=\"G\u00f6rsel 1\"><\/div>\n  <div class=\"slide\"><img src=\"image2.jpg\" alt=\"G\u00f6rsel 2\"><\/div>\n  <div class=\"slide\"><img src=\"image3.jpg\" alt=\"G\u00f6rsel 3\"><\/div>\n<\/div>\n<\/code><\/pre>\n
Bu basit HTML yap\u0131s\u0131, slayt g\u00f6sterimizin temelini olu\u015fturur.  Her bir slide s\u0131n\u0131f\u0131na sahip div eleman\u0131, bir slayd\u0131 temsil eder.  \u0130\u00e7erisinde bulunan img etiketleri ise slaytlar\u0131n g\u00f6rsellerini g\u00f6sterir.  \u015eimdi, GSAP ile bu slaytlar\u0131n dikey olarak zoomlanmas\u0131n\u0131 sa\u011flayacak JavaScript kodunu yazabiliriz.  Bu kod, her slayd\u0131n y\u00fcksekli\u011fini ve \u00f6l\u00e7e\u011fini de\u011fi\u015ftirecek \u015fekilde tasarlanmal\u0131d\u0131r.<\/p>\n
\nlet slides = gsap.utils.toArray(\".slide\");\nlet currentSlide = 0;\n\nfunction showSlide(index) {\n  gsap.to(slides[currentSlide], { scaleY: 0, duration: 0.5, ease: \"power2.inOut\" });\n  gsap.to(slides[index], { scaleY: 1, duration: 0.5, ease: \"power2.inOut\" });\n  currentSlide = index;\n}\n\n\/\/ \u00d6rnek kullan\u0131m: \u0130leri ve geri d\u00fc\u011fmeleri i\u00e7in t\u0131klama olaylar\u0131\n\/\/ ...\n<\/code><\/pre>\n
Yukar\u0131daki kod, GSAP’nin to metoduyla her bir slayd\u0131n scaleY \u00f6zelli\u011fini de\u011fi\u015ftirerek dikey zoom efektini olu\u015fturur.  ease parametresi ise animasyonun ge\u00e7i\u015fini kontrol eder.  Ek olarak,  navigasyon d\u00fc\u011fmeleri ekleyerek kullan\u0131c\u0131lar\u0131n slaytlar aras\u0131nda ge\u00e7i\u015f yapmas\u0131n\u0131 sa\u011flayabilirsiniz.  Bu d\u00fc\u011fmeler, JavaScript kodunda showSlide fonksiyonunu \u00e7a\u011f\u0131rarak slaytlar\u0131 de\u011fi\u015ftirir.  Daha geli\u015fmi\u015f \u00f6zellikler eklemek isterseniz, GSAP’nin sundu\u011fu di\u011fer \u00f6zelliklerini de kullanabilirsiniz; \u00f6rne\u011fin,  scrollTrigger  ile sayfan\u0131n kayd\u0131r\u0131lmas\u0131yla slaytlar\u0131n otomatik olarak de\u011fi\u015ftirilmesini sa\u011flayabilirsiniz.<\/p>\n
Bu makalede, GSAP ile dikey zoomlu bir slayt g\u00f6sterisi olu\u015fturman\u0131n temel ad\u0131mlar\u0131n\u0131 ele ald\u0131k.  Daha detayl\u0131 bilgi i\u00e7in GSAP dok\u00fcmanlar\u0131n\u0131 inceleyebilirsiniz. GSAP Dok\u00fcmanlar\u0131<\/a>  Ayr\u0131ca, daha karma\u015f\u0131k animasyonlar ve etkile\u015fimler i\u00e7in  fatihsoysal.com<\/a>  sitesini ziyaret edebilirsiniz.  Bu sitede,  web geli\u015ftirme ile ilgili daha bir\u00e7ok makale bulabilirsiniz.  Umar\u0131m bu makale faydal\u0131 olmu\u015ftur.  Sorular\u0131n\u0131z i\u00e7in yorum b\u0131rakabilirsiniz.<\/p>\n
Kaynaklar:<\/strong><\/p>\n