Otomatik Metin Animasyon Projesi

Merhabalar, nevistan da ilk yazılım paylaşımı olacak içeriğe hoş geldiniz. Yazılım geçmişim birkaç senedir sürse de yaklaşık bir senedir aktif çalışmayı geçtim hiç çalışmıyordum. Günlük sorumluluklarım belli bir rutine oturduğu için sanırım tekrar cesaretle başladım ve inanıyorum ki bu sefer daha istikrarlı olacak.

Yazılım gelişimim üzerine bir yazı daha yazmayı planlıyorum lakin kısaca ne yaptığımı anlatayım. Frontend üzerine çalıştığım için HTML ve CSS dillerinde bilgim mevcuttu. Javascript (Js) de bu ikilinin olmazsa olmaz asıl yazılım dili diyebileceğimiz algoritma bilgin olması gereken bir dil. Halihazırda biraz bilgim olsa da öğrenmek biraz ezber istediği için projeler yaparak gelişmeyi hedefliyorum.

Hedef olarak Youtube üzerinden yapılan gözüme güzel gözüken tamamen spontane olarak projeler belirledim.

Html ile yazıları belirledik. Css ile yazının konumunu boyutunu ve renk gibi özelliklerini belirledik. Asıl öğrenmem gereken kısım Js de idi. Yazıyı önce yazıp sonra silmesi gereken bir döngü yazılması gerekiyordu.

Benim öğrendiğim kavramlar; quarySelectorAll(), forEach(), setInterval() oldu. Kullanım pratikliği için daha fazla proje yapmak gerek elbette.

Js kısımda önce tanımlamalar yapıldı. Bu kısımda hangi kavramlara ihtiyaç olduğunu bilmek önemli. Bir dataCont adıyla değişken tanımladık ve buna .auto_text classına sahip tüm html elemalarını atadık. Burada quarySelectorAll() kullandık bu kelimeleri liste şeklinde saklamamızı sağladı. Çekilen kelimeler boş bir dizi tanımlanarak orada saklandı. Yazılan kelime harf harf ilerlediği için harflerin konumu, dizi içindeki kaçıncı kelimenin yazıldığı, yazma hızı ve diğer kelimeye geçilirken bekleme miktarı gibi olgular değişken olarak belirlendi.

Sonra belirlenen kelimeleri Js ye çekmek için datalar push edildi. setInterval içinde if-else kullanarak döngü oluşturuldu. Burada iki ayrım yapılmış oldu. Kelime yazılırken yapılacaklar yani hangi koşullardan sonra olacaklar ve kelime silinirken olacaklar şeklinde. Her kavramı neden kullandığımı öğrenmek için bu şekilde alıştırmalar yaptığım için sürekli yorum satırları da kullandım. Yukarda kodun resmini eklidim.

txtNum == texts.length - 1 ? txtNum = 0 : txtNum++;

 // eğer true ise ? bu gerçekleşsin : değilse bu gerçekleşsin. if-else mantığı

Yazdığım kodları Github hesabıma da ekliyorum. Bağlantıdan ulaşabilirsiniz.

Bu çalışmalarım seri halinde devam edecek inşallah. Takipte kalınız.

Ben yolun sonuna değil sürecine odaklandım, sen yolumu güzelleştir Allahım. Bana hayırlı ilimler nasip et. Müslüman mühendis olmak için Bismillah…