Javascript ile titrek bir metin efekti oluşturun

Sep 14, 2025

Nasıl Yapılır

A screenshot from Patrick Heng's website including moving typography

Metin ve tipografiye etkilerini tanıtmak, yepyeni bir perspektif ekleyebilir. kullanıcı deneyimi bir web sitesinde. Ancak, metin okunacak ve bir efektle çok akıllı ya da zeki olmak, bunun amacını yenebilir.

Bu yüzden akıllı ol, zeki ol, ama emin ol kinetik tipografi etkisi aslında çalışıyor, tıpkı olduğu gibi Patrick Heng'in web sitesi - Yukarıdaki resimde yer aldı. Nasıl olduğunu bulmak için okunur ...

1. Giriş metnini oluşturun

Aç Proje dosyaları Ve Velocity.js ve Blast.js kütüphanesinin olduğunu göreceksiniz. Patlama, metni yukarı bölerken, hız bir ara motordur. Her metin parçasını farklı aralıklarla hareket ettirmek için üç ofset değişken vardır.

 & lt; script & gt;
var ofset1 = 0;
var ofset2 = 0;
var ofset3 = 0;
& lt; / script & gt;

2. Metni bölün

Patlama kullanarak, metin karakterlerinin her biri kendi açıklık elemanlarına ayrılır. Sonra üst metin katmanı ilmeklenir ve her bir harf için ofset arttırılır, böylece bağımsız olarak canlandırırlar.

 $ ("h1"). Blast ({
  sınırlayıcı: "Karakter"
});
işlev animasyonu () {
  var $ spans = $ ("# top"). Bul ('span');
  $ spans.Each (işlev () {
  Ofset1 + = 40;

3. Hız ekleyin

Şimdi Hız Kütüphanesi hareketi ve opaklığı ekler, böylece harflerin yukarı çıkması ve kaybolması için. Her harf ofsettir ve her harfin her biri için süre ve rahatlama yapılır.

 $ (bu) .velocity ({
  Translatey: -100,
  Opaklık: 1
  }, {
  Gecikme: Ofset1,
  Süre: 800,
  Kolaylık: "Kolaylık"
  });
  });
}

4. İşlemi arayın

Şimdi 'Anim' işlevi çağrılır ve bu animasyonu başlamak için tetikler. Bir 'Settimeout' işlevi şimdi sarı olacak ikinci metin bloğunu şaşırtıyor. Yine, ilk örnekte olduğu gibi hız kullanılarak tetiklenir.

 animasyon ();
settimeout (işlev () {
  var $ spans = $ ("# middle"). Bul ('span');
  $ spans.Each (işlev () {
  ofset2 + = 40;
  $ (bu) .velocity ({
  Translatey: -100,
  Opaklık: 0.8
  }, {

5. devam edin

Gecikme, süre ve gevşeme, ikinci sarı metnin doğru şekilde hareket etmesi için ayarlanır. Ardından, turuncu olan son metin parçası, bir sonraki 'settimeout' işlevinde, bu işlemden önce biraz daha uzun süredir geciktirmek için kontrol edilir.

 Gecikme: Ofset2,
  Süre: 800,
  Kolaylık: "Kolaylık"
  });
  });
}, 100);
settimeout (işlev () {
  var $ spans = $ ("# alt"). Bul ('span');

6. Son harfler ekleyin

Şimdi son harfler yerine taşınır. Bu aynı etkiyi verir Patrick Heng'in sitesi , metnin katmanları var. Patrick aslında metni taşımak için WebGL kullanır, ancak bu, DOM elemanları ile daha basit bir yoldur.

 $ spans.Each (fonksiyon () {
  Ofset3 + = 40;
  $ (bu) .velocity ({
  Translatey: -100,
  Opaklık: 0.8
  }, {
  Gecikme: Ofset3,
  Süre: 800,
  Kolaylık: "Kolaylık"
  });
  });
}, 150);

Generate Londra'da daha fazla bilgi edinin

Generate graphic — Richard Rutter, Sarah Parmenter ve Bruce Lawson'a bakın ve Londra 2018'i oluşturun.

Richard Rutter, tipografi için bir sevgi ve hayranlığı vardır ve kuruldu FontDeck , öncü bir web yazı tipi hizmeti. Kendi kendine atanan bir web tipografi Evangelist olarak, Richard Clearlev'in baş organizatörüdür. Ampersand Web Tipografi Konferansları.

Londra 2018 Generate'de, atölyesi, tüm şekil ve boyutların ekranları için adapting, ilgi çekici, uygun, kendine özgü, etkileyici ve okunabilen web tipografisiyle web siteleri oluşturmanıza yardımcı olacaktır. Okuyucularınız için en iyi deneyimleri tasarlamak ve geliştirmek için, değişken yazı tipleri de dahil olmak üzere, yüzyıllar eski zanaatın en son teknolojiyle nasıl birleştirileceğini öğreneceksiniz.

Bir gün boyunca, her yeni tekniği size geri alabileceğiniz ayrıntılı bir örnek siteye uygulayarak uygulamalı faaliyetlere katılacaksınız. Bu, gelecekte başvurmanız için mükemmel bir kaynak oluşturacaktır. Ve eğer bu yeterli değilse, her katılımcı Richard'ın beğenisine ücretsiz bir elektronik kopyası ile yürüyecek. Web tipografi kitabı .

Kaçırmayın, şimdi biletinizi alın

İlgili Makaleler:

1.000 projede mükemmel javascript
Grafik tasarımcılar için Pro Dijital Tip İpuçları
7 Harika Web Tipi Kaynaklar

Javascript ile titrek bir metin efekti oluşturun

1. Giriş metnini oluşturun

2. Metni bölün

3. Hız ekleyin

4. İşlemi arayın

5. devam edin

6. Son harfler ekleyin

Generate Londra'da daha fazla bilgi edinin

Nasıl Yapılır - En Popüler Makaleler

Lino PrintMaking: Bir giriş

Bir Apple Watch App nasıl yapılır

Google Recaptcha ile Botları Durdurun

Baskı için bir dosyayı nasıl hazırlayabilirsiniz

Suluboya için yaramaz bir tavşan boya

VR kreasyonlarınızı geliştirmek için 5 ipucu

Sinema 4d'de gerçekçi bitkiler yapmak

Oyunlar için stilize bir 3D karakter nasıl oluşturulur

Kategoriler