10 Harika Animasyonlu Metin CSS ve JavaScript Kod Parçacıkları

Temel CSS ve birkaç satır JavaScript ile oldukça göz kamaştırıcı metin efektleri yapabilirsiniz. Bu efektler, metin görüntüleme animasyonlarından 3B döndürmelere veya hayal edebileceğiniz herhangi bir şeye kadar uzanır.

Ve bu yazıda, biraz stilize metin ve CSS koduyla neler yapabileceğinizi gösteren, web'deki en havalı 10 örneği katalogladım.

Bu CSS Animasyon Araçlarını da beğenebilirsiniz.

1. Başlık Animasyonu

Robin Treur'un bu animasyonlu başlık efekti, birçok film veya video oyununun tarzını takip ediyor. Harfler, hafif bir çapraz eğimle birlikte CSS3 metin gölgelerini kullanarak çıkıntılı bir 3D efekti alır.

Yavaş yavaş animasyon stili bana 1930'ların aynı eğik metne sahip klasik filmlerini hatırlatıyor. Her şey CSS aracılığıyla kontrol edilir, ancak “yeniden başlat” düğmesi JavaScript kullanılarak oluşturulmuştur. Bu şekilde, daha iyi bir görünüm elde etmek için animasyonu defalarca oynatabilirsiniz.

2. Parçalayıcı

Kırık paramparça metin oluşturmak After Effects gibi araçlarla basit bir iştir, ancak kod ile bir metin parçalama animasyonu oluşturmak çok daha zordur, bu da Arsen Zbidniakov'un bu kalemini oldukça etkileyici kılmaktadır.

Metin aslında animasyon sürecini biraz daha kolaylaştıran SVG şekilleri kullanılarak oluşturulmuştur. Bu aynı zamanda, metni normal şekilde seçemeyeceğiniz, kopyalayamayacağınız veya metinle etkileşim kuramayacağınız anlamına gelir.

Ancak, bir logo veya etkileşimli olmayan başka bir sayfa öğesi için kullanırsanız sitenize benzer bir efekt ekleyebilirsiniz.

3. Bükülmüş Harfler

Geliştirici Mamun Khandaker, bu çarpık harf animasyonları koleksiyonunu bir araya getirdi. Her animasyon stilinin farklı bir adı vardır ve hepsine bu tek kalemde göz atabilirsiniz.

Bir araç/web uygulaması için açılış sayfalarında veya ana sayfalarında kullanılan bu metin efektlerini görebiliyordum. Bunlar hemen dikkat çeker ve ziyaretçi üzerinde kalıcı bir izlenim bırakır. Ayrıca hepsi %100 saf CSS ile yapılmıştır ve düzenlemesi çok kolaydır.

4. Piksel Alfabesi

Bu benzersiz animasyonlu piksel efekti kesinlikle garip, ancak garip bir şekilde büyüleyici. Çoğunlukla JavaScript'e dayanır ve geliştirici Georgi Nikoloff tarafından HTML5 tuval öğesiyle oynamanın bir yolu olarak oluşturulmuştur.

Yazı tipi tabanı olarak Noto Serif'i kullanır ve tuval öğesinin içindeki harfleri dövülebilir öğelere dönüştürür. JavaScript, harfleri daha küçük noktalara böler ve bunlar animasyonun temelini oluşturur.

Bunun çok pratik bir faydası olacağını söyleyemem ama web animasyonunun ne kadar ilerlediğinin bir kanıtı.

5. Karusel Yazma

Bu etki, küçük portföylerde ve ajans web sitelerinde herkesin bildiği gibi popülerdir. Yazma metni animasyonu genellikle bir sitenin başlığında görünür ve bir kelime işlemcide yazan birinin görünümünü taklit eder.

Her şey, iyi bir CSS ve JavaScript animasyonu karışımıyla tek bir öğenin içinde bulunur. Bazen web sitelerinin, çalışmalarının, geçmişlerinin veya birlikte çalıştıkları müşterilerin açıklamalarını listelemek için bunu kullandığını görürsünüz.

Ölçülü kullanıldığında kesinlikle eğlenceli bir etki. Bir seferde yalnızca bir kelime görünür olduğundan, sayfanın okunabilirliğini sınırlar, ancak az kullanıldığında bu, herkesin kopyalayabileceği çok güzel bir efekttir.

6. Kaplan Kaplanı

Joseph Martucci'nin William Blake şiiri “The Tyger”dan ödünç aldığı bu eşsiz animasyon gerçekten dikkatinizi çekiyor.

Buradaki odak, içerikten çok tipografik stiller ve animasyonlar üzerindedir. Metnin her "segmenti", metin anahatları ve parlak efektlerle kendi stiline sahiptir. setTimeout() kullanarak metni sırayla canlandırmak için bir ana sayfaya nasıl stil uygulayabileceğinizin harika bir örneği.

7. SVG'yi Yapış

Açık kaynaklı Snap.svg kitaplığı, herkesin sadece biraz kodla yüksek çözünürlüklü SVG görüntüleri oluşturmasına olanak tanır. Bu, Illustrator gibi bir programı öğrenmekten çok daha kolaydır ve tıpkı Alexis Blondin tarafından oluşturulan bu eğlenceli örnekte olduğu gibi canlandırmanıza olanak tanır.

Tüm harfler, animasyonda kullanılan rastgele karakterler de dahil olmak üzere JavaScript aracılığıyla dinamik olarak oluşturulur. Modern SVG desteği çok büyüktür ve bu görüntü türleri, önümüzdeki yıllarda web siteleri oluşturma şeklimizi kökten değiştirebilir. Bu Snap.svg animasyonu sadece bir örnek ve kesinlikle harika.

8. Braket Animasyonu

İşte her zaman gördüğüm oldukça yaygın bir metin animasyon tekniği. Sayfada neredeyse bir rolodex gibi dönen metin içeren parantezler kullanır.

Bu animasyon, daha önce bahsettiğim yazma atlıkarınca efektini taklit ediyor, ancak bunun sadece CSS ile yapılabilmesi dışında. Bir CSS ana karesinden diğerine hareket eden özel bir döngü animasyonuna dayanır, her kare dönen metinde farklı bir kelime veya ifade gösterir.

Bu etkiyi bir ana sayfada çok daha ince ve okunması daha kolay buluyorum. Ana sayfanız için harika metin efektleri arıyorsanız, bu mükemmel bir seçim olacaktır.

9. Kırılmaz Kimmie Schmidt

Bu tatlı logo efekti, Netflix dizisi “Unbreakable Kimmie Schmidt”ten ödünç alındı. Metin stilleri ve özel animasyonlar dahil her şey CSS ile oluşturulur.

Sayfa gövdesi, animasyonu başlatan bir sınıfa sahiptir ve bu sınıf JavaScript kullanılarak sayfaya eklenir. Oradan hepsi saf CSS. Şaşırtıcı derecede gerçekçi sıçrama efekti oluşturmak için çoğunlukla bir grup dönüşüm kullanır.

Nasıl kullanılacağını biliyorsanız, CSS3'ün ne kadar yapabileceğinin bir başka örneği.

10. SVG Metnini Doldurma

Son olarak, kutu gölgeleri ve CSS vuruş özelliğinin bir karışımını kullanarak bu çok benzersiz SVG dolgu animasyonuna geliyoruz.

Bu metin tamamen SVG'lerle oluşturulmuştur ancak aynı zamanda seçilebilir, böylece normal metin gibi harfleri kopyalayıp yapıştırabilirsiniz. Tüm tarayıcılarla tamamen uyumludur ve animasyon, herhangi bir web sitesine sığabilecek kadar incedir.

Tüm bu metin animasyonları masaya yeni bir şey getiriyor. Bunları kendi işinizde pratik veya kullanışlı bulamayabilirsiniz, ancak doğru yaklaşımla neredeyse her şeyin mümkün olduğunu kanıtlıyorlar.