Bu Göz Kamaştırıcı Efektlerle Metninizi Harekete Geçirin

Her şeyi harekete geçirme eğilimi, bu günlerde tüneklere hükmediyor. Bu çılgınlığı takip etmekten ve bir web sitesinin her detayına hayat enjekte etme takıntısı geliştirmekten kendinizi alıkoyamazsınız. Statik dönem geride kaldı. Her şey dinamik. Ve biliyor musun? Kullanıcılar bunun tamamen farkındadır.

Bazıları için bu kötü bir haber, çünkü kullanıcıları statik bir web sitesinin heyecan verici bir deneyim getirdiğine inandırmak için Herkül'ün çabalarını gerektirecektir. Diğerleri için bu, gösteriş yapmak, iç dehanızı ortaya çıkarmak ve dinamik çılgınlık dünyasında kaybolmak için bir fırsattır.

Tipografi ile yapabileceğiniz tek şeyin sıra dışı bir yazı karakteri veya abartılı bir vurgulu efekt kullanmak olduğuna hâlâ inanıyorsanız, yanıldığınızı kanıtlayacağız. Tipografi ile harikalar yaratabilir, izlenim yaratma açısından başkalarına teslim olmayacak bir şeye dönüştürebilirsiniz.

Ve sürükleyici veya ağır çözümlerin hayranı değilseniz, bu gerçekten bir çıkış yolu. Size sağlam bir başlangıç ​​yapmak için, harflerin ustaca harekete geçirildiği ve mükemmel bir sonuç ortaya çıkaran birkaç inanılmaz kod parçacığı topladık.

Paramparça Metin Animasyonu, Arsen Zbidniakov

Arsen Zbidniakov'un Shattering Text Animation'ına bakmanız yeterli. parlak değil mi? Çözüm, ziyaretçileri ne çok fazla aksiyon ve gereksiz dinamiklerle bunaltıyor ne de sisteminize aşırı yük bindiriyor. Herkesi bir "vay" durumunda bırakarak işe yarıyor.

GSAP araçları ve SVG yolunun yardımıyla yapılan, metni birleştiren ve parçalarına ayıran bu yıkıcı etki tek kelimeyle inanılmaz. Dahası, fare imlecini üzerine getirin ve işlemin hızını kontrol etme ve her şeyi yavaşlatma fırsatına sahip olacaksınız. Bu sadece olağanüstü.

Szenia Zadvornykh'den Metin Animasyonu

İlk örneğimizde olduğu gibi, bu kod parçacığı, metni birleştirme ve parçalarına ayırma animasyonunu gösterir. Ancak bu sefer sanatçı, her şeyi hayata geçirmek için Three.js'yi kullanıyor. Bu başka bir kontrol edilebilir patlama. Evet, doğru okudunuz: Animasyonun hızını tıklayıp sürükleyerek de kontrol edebilirsiniz. Ve bu deneyden hoşlanıyorsanız, Szenia'nın daha eğlenceli örnekleri var. Profiline bakmanız yeterli.

Ara'dan Hareketli Grafik Yazı Tipi ve Başka Bir Deney

Ara'nın tipografiyle ilgili akıllara durgunluk veren birkaç deneyi var. Aşağıdaki örneklerin her ikisi de soyuttur, geometrik manipülasyonlara dayalıdır ve yüksek teknoloji hissi verir ve görünür. Hatta bazı yönlerden biraz tuhaflar.

İlk örnekte metin, yavaş ama kesin bir şekilde 3 boyutlu bir parçacık tüneli oluşturan küçük parçalardan oluşuyor.

İkincisinde, her sembol harekete geçirilen üçgen, kare ve dikdörtgen gibi ilkel çokgenlerden oluşturulur. Birinin dijital eli hepsini birlikte dokuyor gibi geliyor.

Nate Wiley'den GSAP Metin Animasyonu

Nate Wiley, Greensock'tan Bölünmüş Metni kendi avantajına çevirerek harika bir metin animasyonu yarattı. Normal bir metin parçası alır ve onu, her birinin bir sembol olduğu küçük parçalara üfler. Patlamadan sonra karakterler çeşitli yönlerde hareket eder ve sorunsuz bir şekilde kaybolur.

CSS Hareket Tipografisi: Dudley Storey'den Patlayan Metin

Çözümlerin güzelliğinin arkasında ileri teknoloji teknolojilerin durduğu önceki örneklerden farklı olarak, burada CSS tabanlı hareket gösteriyi yönetiyor. Dudley Storey, CSS ana kare animasyonlarını, geçişlerini, JavaScript'i, SVG'yi ve biraz Adobe Illustrator büyüsünü harekete geçirir. Kelime biraz paramparça oluyor ve sonra hala okuyabileceğiniz şekilde çokgen parçalara ayrılıyor. Tipografinize şık bir vahşet eklemek istiyorsanız, bu efekt kesinlikle bir başlangıç ​​noktasıdır.

Yasunobu Ikeda'dan Three.js kullanarak 3D Birçok Simge

Nate Wiley metni havaya uçururken, Yasunobu Ikeda, tam tersine, ekranın her tarafına düzensiz bir şekilde dağılmış parçacıkları metne dönüştürmeye zorlar. Burada parçacıklar küçük simgelerden başka bir şey değildir. Yazar, bu muhteşem 3D animasyonu yeniden oluşturmak için Three.js'yi kullanıyor.

SVG Path animasyonlu Metin Tamino Martinius tarafından

Tamino Martinius, SVG yollarını kullanarak daha geleneksel manipülasyonlardan yararlanır. Şık şekiller, ultra ince çizgiler ve sıvı benzeri davranış sayesinde, animasyon zarafet ve zarafet yayıyor. İlk örneğimiz kadar akıllara durgunluk veren olmasa da, gücü, kesinlikle pratik bir çözüm olduğu için çok sayıda projeye uyum sağlama yeteneğinde yatmaktadır.

Daha Pratik Kullanım İçin

Bahsi geçmişken, bazı ilham verici ve pratik çözümler de ekledik. Burada, bu yönde bebek adımları atabilmeniz için tip harekete geçirilmiştir.

İlk iki örnekte sloganlar ve akılda kalıcı ifadeler için faydalı olabilecek efektler bulunurken, ikincisi normal metin blokları için ilginç bir çözümdür.

Düşün – döngü yarat, Mikael Ainalem

Mikael Ainalem'in kalemi, kelimelerin bir rotasyonda vurgulandığı döngülü bir animasyon gösteriyor. Kullanıcıları bir kelimeden diğerine yönlendirmenin mükemmel bir yoludur.

BASILI, Tryggvi Gylfason

Tryggvi Gylfason, soldan sağa kayan ve harfleri onu takip etmeye zorlayan, böylece bir kelimenin sembollerine basarak veya çekerek hareket eden bir çizgi ekler. Etkisi küçük ama büyüleyici.

Ignacio Correia'dan TweenMax ile Metin Kaydırma hareket bulanıklığı

Ignacio Correia, metni hareket bulanıklığı efektiyle sağlar. Hızlı bir şekilde aşağı indiğinizde, metin neredeyse beyaz bir noktaya bulanıklaşıyor. Yavaşladıkça, kelimeler daha az belirsiz hale gelir.

Tipografide Animasyon Kullanımına İlişkin Bir Örnek

Bu tipografik animasyonlar bizi durup aksiyonun tadını çıkarmaya zorluyor. Kahraman alanları gibi diğer unsurlarda görülebilen animasyonlar kadar ilham verici ve göz alıcıdırlar.

Ne yazık ki, birçoğunu vahşi doğada görmüyoruz. Görünüşe göre herkes basit harfleri harekete geçirmek yerine aksiyon dolu tam ekran animasyonları kullanmaya takıntılı. Ancak burada gördüğümüz gibi, bu etkiler kullanıcılar üzerinde de aynı etkiyi yaratabilir.