{"id":16602,"date":"2025-03-29T18:15:14","date_gmt":"2025-03-29T15:15:14","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/css-ile-trigonometri-kullanarak-araba-kaydirma-animasyonu\/"},"modified":"2025-03-29T18:15:14","modified_gmt":"2025-03-29T15:15:14","slug":"css-ile-trigonometri-kullanarak-araba-kaydirma-animasyonu","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/css-ile-trigonometri-kullanarak-araba-kaydirma-animasyonu\/","title":{"rendered":"CSS ile Trigonometri Kullanarak Araba Kayd\u0131rma Animasyonu"},"content":{"rendered":"

CSS ile Trigonometri Kullanarak Araba Kayd\u0131rma Animasyonu<\/p>\n

Merhaba, Fatih Soysal burada! Bu yaz\u0131da, CSS ve Trig.js k\u00fct\u00fcphanesini kullanarak nas\u0131l etkileyici bir araba kayd\u0131rma animasyonu olu\u015fturabilece\u011finizi ad\u0131m ad\u0131m g\u00f6sterece\u011fim. Bu animasyon, web sitenize dinamik ve ilgi \u00e7ekici bir g\u00f6r\u00fcn\u00fcm katacakt\u0131r. \u00d6ncelikle, projeye ba\u015flamadan \u00f6nce gerekli olan temel HTML yap\u0131s\u0131n\u0131 olu\u015ftural\u0131m.<\/p>\n

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

\u0130lk olarak, sayfam\u0131za bir araba g\u00f6r\u00fcnt\u00fcs\u00fc ekleyece\u011fimiz bir div<\/code> olu\u015fturmam\u0131z gerekiyor. Bu div<\/code>, animasyonun uygulanaca\u011f\u0131 temel kapsay\u0131c\u0131 olacakt\u0131r. A\u015fa\u011f\u0131daki kod blo\u011fu, bu basit HTML yap\u0131s\u0131n\u0131 g\u00f6stermektedir:<\/p>\n

\n<div class=\"car\"><\/div>\n<\/code><\/pre>\n
Ard\u0131ndan,  bu div<\/code> eleman\u0131na CSS ile stil verece\u011fiz.  Bu k\u0131s\u0131mda,  arabam\u0131z\u0131n g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve konumunu ayarlayaca\u011f\u0131z. Ayr\u0131ca,  animasyonun temelini olu\u015fturacak CSS \u00f6zellikleri de burada tan\u0131mlanacakt\u0131r.<\/p>\n
CSS Stili ve Animasyon<\/h2>\n
\u015eimdi,  olu\u015fturdu\u011fumuz car<\/code> s\u0131n\u0131f\u0131na CSS ile stil uygulayal\u0131m.  Bu k\u0131s\u0131m, animasyonun g\u00f6r\u00fcn\u00fcm\u00fcn\u00fc ve hareketini kontrol eder.  A\u015fa\u011f\u0131daki CSS kod blo\u011fu, temel bir araba tasar\u0131m\u0131 ve kayd\u0131rma animasyonu i\u00e7in gerekli \u00f6zelliklerini i\u00e7erir:<\/p>\n
\n.car {\n  width: 50px;\n  height: 30px;\n  background-image: url('car.png'); \/* Araba resminizin yolunu buraya girin *\/\n  background-size: cover;\n  position: absolute;\n  bottom: 0;\n  left: 50%;\n  transform: translateX(-50%);\n  animation: drive 5s linear infinite;\n}\n\n@keyframes drive {\n  from {\n    left: 0;\n  }\n  to {\n    left: 100%;\n  }\n}\n<\/code><\/pre>\n
Bu CSS kodu, arabam\u0131z\u0131 sayfan\u0131n alt\u0131na ortalar ve  drive<\/code> adl\u0131 bir animasyon uygular.  Bu animasyon, arabay\u0131 sayfan\u0131n solundan sa\u011f\u0131na kayd\u0131rarak hareket etmesini sa\u011flar.  Ancak,  bu sadece basit bir \u00f6rnektir.  Daha geli\u015fmi\u015f animasyonlar i\u00e7in Trig.js k\u00fct\u00fcphanesini kullanabiliriz.  Bu sayede,  daha ger\u00e7ek\u00e7i ve karma\u015f\u0131k hareketler olu\u015fturabiliriz.<\/p>\n
Trig.js ile Geli\u015fmi\u015f Animasyon<\/h2>\n
Trig.js,  JavaScript’te trigonometrik fonksiyonlar\u0131 kullanarak animasyon olu\u015fturmay\u0131 kolayla\u015ft\u0131r\u0131r.  Bu k\u00fct\u00fcphaneyi kullanarak,  arabam\u0131z\u0131n hareketini daha ger\u00e7ek\u00e7i hale getirebiliriz. \u00d6rne\u011fin,  arabam\u0131z\u0131 yolda hafif\u00e7e sallanmas\u0131n\u0131 sa\u011flayabiliriz.  Bu etkiyi elde etmek i\u00e7in, Trig.js’nin sundu\u011fu fonksiyonlar\u0131 kullanarak transform<\/code> \u00f6zelli\u011fini dinamik olarak g\u00fcncelleyebiliriz.  Bu konuda daha fazla bilgi i\u00e7in Trig.js’nin resmi d\u00f6k\u00fcmanlar\u0131na g\u00f6z atabilirsiniz.  Ayr\u0131ca,  bu animasyonu daha da geli\u015ftirmek i\u00e7in,  farkl\u0131 animasyon t\u00fcrlerini ve efektlerini deneyebilirsiniz.<\/p>\n
Bu basit \u00f6rnek,  CSS ve Trig.js’nin birlikte nas\u0131l kullan\u0131labilece\u011fini g\u00f6stermektedir.  Daha karma\u015f\u0131k animasyonlar i\u00e7in, JavaScript’in sundu\u011fu olanaklar\u0131 da kullanabilirsiniz.  Unutmay\u0131n ki,  bu sadece ba\u015flang\u0131\u00e7 noktas\u0131d\u0131r.  Kendi yarat\u0131c\u0131l\u0131\u011f\u0131n\u0131z\u0131 kullanarak,  harika ve \u00f6zg\u00fcn animasyonlar olu\u015fturabilirsiniz.  Web geli\u015ftirme d\u00fcnyas\u0131nda yarat\u0131c\u0131l\u0131\u011f\u0131n s\u0131n\u0131r tan\u0131mad\u0131\u011f\u0131n\u0131 unutmay\u0131n! Daha fazla web geli\u015ftirme ipucu ve t\u00fcyosu i\u00e7in fatihsoysal.com<\/a> sitesini ziyaret edebilirsiniz.<\/p>\n
Kaynaklar<\/h2>\n