{"id":9156,"date":"2025-01-10T09:00:13","date_gmt":"2025-01-10T06:00:13","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/metin-icinde-goruntu-animasyon-etkisi-html-css-ve-javascript-ile\/"},"modified":"2025-01-10T09:00:13","modified_gmt":"2025-01-10T06:00:13","slug":"metin-icinde-goruntu-animasyon-etkisi-html-css-ve-javascript-ile","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/metin-icinde-goruntu-animasyon-etkisi-html-css-ve-javascript-ile\/","title":{"rendered":"Metin \u0130\u00e7inde G\u00f6r\u00fcnt\u00fc Animasyon Etkisi: HTML, CSS ve JavaScript ile"},"content":{"rendered":"

Metin \u0130\u00e7inde G\u00f6r\u00fcnt\u00fc Animasyon Etkisi: HTML, CSS ve JavaScript ile<\/p>\n

Merhaba! Fatih Soysal olarak, bug\u00fcn size metin i\u00e7ine yerle\u015ftirilmi\u015f animasyonlu g\u00f6r\u00fcnt\u00fcler olu\u015fturman\u0131n heyecan verici d\u00fcnyas\u0131n\u0131 g\u00f6sterece\u011fim. Bu teknik, web sitenizin veya uygulaman\u0131z\u0131n g\u00f6rsel \u00e7ekicili\u011fini art\u0131rmak i\u00e7in harika bir yoldur. Yaz\u0131n\u0131n ak\u0131\u015f\u0131na entegre edilmi\u015f hareketli g\u00f6rseller, kullan\u0131c\u0131 deneyimini zenginle\u015ftirir ve i\u00e7eri\u011fin daha ilgi \u00e7ekici hale gelmesine yard\u0131mc\u0131 olur. \u00d6ncelikle, temel prensipleri anlayarak ba\u015flayal\u0131m. Sonras\u0131nda, \u00f6rnek kodlar ve a\u00e7\u0131klamalar e\u015fli\u011finde ilerleyece\u011fiz.<\/p>\n

Bu efekt genellikle CSS ve JavaScript\u2019in bir kombinasyonuyla elde edilir. \u00d6rne\u011fin, bir g\u00f6r\u00fcnt\u00fcy\u00fc metnin aras\u0131na yerle\u015ftirip, CSS ile konumland\u0131rabilir, JavaScript ile animasyon ekleyebilirsiniz. Bu animasyonlar basit kayd\u0131rma hareketlerinden, karma\u015f\u0131k d\u00f6n\u00fc\u015f\u00fcmlere kadar bir\u00e7ok farkl\u0131 \u015fekilde ger\u00e7ekle\u015ftirilebilir. \u00d6nemli olan, animasyonun metnin ak\u0131\u015f\u0131na uyumlu ve rahats\u0131z edici olmayacak \u015fekilde tasarlanmas\u0131d\u0131r. Ak\u0131c\u0131 bir deneyim sa\u011flamak i\u00e7in animasyon h\u0131z\u0131n\u0131 ve s\u00fcresini dikkatlice ayarlaman\u0131z gerekir. A\u015f\u0131r\u0131 hareketli g\u00f6r\u00fcnt\u00fcler kullan\u0131c\u0131y\u0131 rahats\u0131z edebilir.<\/p>\n

Temel HTML Yap\u0131s\u0131<\/h2>\n

\u0130lk ad\u0131m\u0131m\u0131z, HTML yap\u0131m\u0131z\u0131 kurmak. G\u00f6r\u00fcnt\u00fcm\u00fcz\u00fc metnin aras\u0131na yerle\u015ftirmek i\u00e7in, etiketini kullanaca\u011f\u0131z. Bu etikete, style \u00f6zniteli\u011fi ekleyerek CSS ile stil verebilir ve konumland\u0131rabiliriz. A\u015fa\u011f\u0131da basit bir \u00f6rnek bulunmaktad\u0131r:<\/p>\n

\n<p>Bu bir paragraf ve i\u00e7ine bir<img src=\"resim.jpg\" alt=\"Resim\" style=\"width:50px; height:50px; position:relative; top:-10px; left:10px;\"> resim ekledik.<\/p>\n<\/code><\/pre>\n
Yukar\u0131daki \u00f6rnekte, resmi paragraf\u0131n i\u00e7ine yerle\u015ftirdik ve CSS kullanarak boyutunu, konumunu ve di\u011fer \u00f6zelliklerini ayarlad\u0131k.  Ancak bu sadece statik bir g\u00f6r\u00fcnt\u00fc. \u015eimdi JavaScript ile animasyon ekleyelim.<\/p>\n
JavaScript ile Animasyon Ekleme<\/h2>\n
JavaScript kullanarak, g\u00f6r\u00fcnt\u00fcm\u00fcze hareketlilikler ekleyebiliriz. \u00d6rne\u011fin, resmi sola do\u011fru hareket ettirebilir veya d\u00f6nd\u00fcrebiliriz.  A\u015fa\u011f\u0131da, JavaScript ile basit bir animasyon \u00f6rne\u011fi bulunmaktad\u0131r:<\/p>\n
\nlet img = document.querySelector('img');\n\nimg.addEventListener('mouseover', () => {\n  img.style.transform = 'translate(-10px, -10px) rotate(10deg)';\n});\n\nimg.addEventListener('mouseout', () => {\n  img.style.transform = 'translate(0, 0) rotate(0deg)';\n});\n<\/code><\/pre>\n
Bu kod, fare imleci resmin \u00fczerine geldi\u011finde resmin sola ve yukar\u0131 do\u011fru kaymas\u0131n\u0131 ve hafif\u00e7e d\u00f6nmesini sa\u011flar.  Fare imleci resmin \u00fczerinden \u00e7\u0131kt\u0131\u011f\u0131nda, resim eski konumuna geri d\u00f6ner.  Bu, basit bir \u00f6rnek olmakla birlikte, daha karma\u015f\u0131k animasyonlar olu\u015fturmak i\u00e7in JavaScript k\u00fct\u00fcphaneleri de kullanabilirsiniz.  Animasyonlar\u0131n kullan\u0131m\u0131, web sitenizin amac\u0131na ve hedef kitlenize uygun olmal\u0131d\u0131r.<\/p>\n
CSS Animasyonlar\u0131<\/h2>\n
JavaScript’e ek olarak,  CSS animasyonlar\u0131 ile de  daha ak\u0131c\u0131 ve performansl\u0131 animasyonlar olu\u015fturabilirsiniz.  CSS animasyonlar\u0131, JavaScript’e k\u0131yasla daha basit ve performansl\u0131d\u0131r, \u00f6zellikle de daha az i\u015flem gerektiren animasyonlarda.<\/p>\n
\u00d6rne\u011fin;  @keyframes  kullanarak bir animasyon tan\u0131mlay\u0131p,  CSS animation \u00f6zelli\u011fi ile g\u00f6r\u00fcnt\u00fcn\u00fcze uygulayabilirsiniz. Bu y\u00f6ntem, daha karma\u015f\u0131k animasyonlar i\u00e7in de kullan\u0131labilir ve  JavaScript kodunu azaltman\u0131za yard\u0131mc\u0131 olur.<\/p>\n
Sonu\u00e7<\/h2>\n
Metin i\u00e7inde g\u00f6r\u00fcnt\u00fc animasyonu, web sitenize dinamik ve etkileyici bir g\u00f6r\u00fcn\u00fcm kazand\u0131rman\u0131n harika bir yoludur.  Bu teknik, do\u011fru kullan\u0131ld\u0131\u011f\u0131nda kullan\u0131c\u0131 deneyimini olumlu y\u00f6nde etkileyebilir.  Ancak, a\u015f\u0131r\u0131ya ka\u00e7mamak ve animasyonlar\u0131 kullan\u0131c\u0131 dostu tutmak \u00e7ok \u00f6nemlidir.  Umar\u0131m bu makale, metin i\u00e7inde g\u00f6r\u00fcnt\u00fc animasyonlar\u0131 olu\u015fturma konusunda size yard\u0131mc\u0131 olmu\u015ftur. Daha fazla bilgi i\u00e7in  fatihsoysal.com<\/a>  sitesini ziyaret edebilirsiniz.<\/p>\n
Faydal\u0131 bulabilece\u011finiz di\u011fer kaynaklar:<\/p>\n