Etkileşimli 3D tipografi etkilerini

Tipografi, mesajı artıracak ve iletilen şey için doğru bağlamı sunacak olan doğru yazı tipini seçtikleri için tipografi, her türlü tasarımcının aracı alanında önemli bir rol oynamıştır. Son sekiz yılda, web tasarımcıları getirme yeteneğine sahipti. özel yazı tipleri gibi kinetik tipografi Tasarımlarına ve baskı tasarımcıları tarafından zevk alanlara benzer tipografik kontrollere sahip.

Ödüllü veya alıcı 'günün sitesi' başlıkları olarak sahip olan sitelerin birçoğuna bir göz atın ve yakında tipografi kullanımlarının tasarımın üstesinden gelmelerini sağlayan, rekabetlerinin üstünde yükselmelerini sağlar. Bu, animasyonlu harf formlarından, reaktif hareketten kullanıcı etkileşimlerine reaktif hareket arasında değişebilir, Center Fazlası Alınan Tip Formlarının Kalın Kullanımı (Tipografinizi Güvenli Koruyun) Bulut depolama ).

Sıfır telaşlı bir dikkat kapma sitesi oluşturmak istiyorsanız, deneyin Web Sitesi Oluşturucu çok. Ve sitenizin performansının üst ile optimize edildiğinden emin olun. ağ sağlayıcısı .

• 3D Yazı Tipleri: 9 Üst Tip İpuçları

Bu eğitimde, tip efekti, harflerin şekillerini dinamik olarak girecek ve harflerle hareket edecek bazı hızlı, serbest akan parçacıklar yollarına maske olarak kullanır. Sadece bu güzel animasyon olacak, ancak bunun üzerine yapıldığı için Html5 tuval Öğe, bu, ekranın etrafında hareket ettiği gibi fareye doğru döndürmek için 3D olarak dönüştürülecektir. Bu, saha başlıkları için mükemmeldir veya sadece kullanıcının bir eylem çağrısı için dikkatini çekmeniz gerektiğinde.

Buradaki öğretici dosyaları indirin

01. İşlemi başlatın

Kod IDE'nizdeki proje dosyalarından 'başlat' klasörünü açın. Proje, partikül nesnesi sınıfını oluşturarak başlayacak. Bu, projedeki metindeki akan görüntüleri oluşturmak için kullanılacaktır. 'Sketch.js' dosyasını açın ve baz parçacıklarını oluşturmaya başlamak için aşağıdaki değişkeni ekleyin.

 fonksiyon partikülü () {
  bu.Pos = Createvector (rastgele (genişlik), rastgele ((yükseklik - 100)));
  this.vel = createvector (0, 0);
  this.acc = createvector (0, 0);
  this.maxSpeed ​​= MaxSpeed;
  this.prevpos = this.pos.copy (); 

02. Parçacık güncelleyin

Parçanı hareket ettirmek için, bir güncelleme işlevi her karede çalıştırılır, bu, partikülün hızını ve hızın hızlanmasını giderir. Hız sonunda daha sonra eklenecek bir küresel değişkenle sınırlandırılacaktır. Hız, bireysel parçacık pozisyonuna eklenir. Bir parçacık oluşturarak, herhangi bir zamanda ekranda birkaç bin oluşturulacak.

 this.update = fonksiyon () {
  this.vel.add (this.acc);
  this.vel.Limit (this.maxspeed);
  this.pos.add (this.vel);
  this.acc.mult (0);
  } 

03. Akışla git

Parçacıklara akan hareketlerini vermek için, gürültü ile üretilen bir akış alanı takip edilecektir. Burada oluşturulan işlev, akışın vektörünün içeri girmesini sağlar ve bu nedenle bu işlevin adı. Vektör yönün kuvveti partiküle uygulanacaktır.

 this.follow = işlev (vektörler) {
  var x = kat (this.pos.x / scl);
  var y = kat (this.pos.y / scl);
  var indeksi = x + y * cols;
  var kuvveti = vektörler [index];
  this.applyforce (kuvvet);
  } 

04. Takip et ama çok yakın değil

Tüm parçacıkları bir araya getiren tüm parçacıkları durdurmak için, bu tür bir hareketle kolayca gerçekleşebilecek parçacıklar, konumlarına çok az miktarda rasgele eklenmiştir. Bu, hafif miktarda saçmanın gerçekleşmesine neden olur.

 this.Scatter = fonksiyon (vektörler) {
  this.pos.x + = rastgele (-0.9, 0.9);
  this.pos.y + = rastgele (-0.9, 0.9);
  }
  this.applyforce = fonksiyon (kuvvet) {
  this.acc.Add (kuvvet);
  } 

05. Parçacık görüntüleyin

Buradaki gösteri işlevi parçacıkları görüntüler. Yaptığı ilk şey, çizgiyi oluşturmak için açık gri renkte bir piksel darbesi eklemektir. Hat, geçerli konumundan önceki çerçevedeki son konumuna getirilir. Önceki pozisyon bir dahaki sefere döngü boyunca saklanır.

 this.show = fonksiyon () {
  inme (180);
  strok ağacı (1);
  hat (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  this.updatePrev ();
  }
  this.updateprev = fonksiyon () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Etrafına sarın

Kenarlar fonksiyonu, partikül ekranın kenarına ulaşıp ulaşırsa çalışır ve eğer öyleyse, ters tarafa gelecek şekilde sarılır. Bu bölüm, x pozisyonu ile ilgilenir, böylece ekranın genişliğinden daha büyükse, sol kenara gönderir ve bunun tersi de geçerlidir.

 this.edges = fonksiyon () {
  if (this.pos.x & gt; genişlik) {
  this.pos.x = 0;
  this.updatePrev ();
  }
  if (this.pos.x & lt; 0) {
  this.pos.x = genişlik;
  this.updatePrev ();
  } 

07. Sarmalayıcı'nın Lokumu

Bu kod, kenar algılamanın geri kalan kısmıdır ve ekranın üst ve alt kısmı için Y ekseni üzerindeki parçacıkları tespit eder. Buradaki parantezler, tüm parçacık sınıfını tamamlar. Bu, bu sınıfı kullanarak birçok parçacık oluşturulabilir.

 if (this.pos.y & gt; yükseklik) {
  this.pos.y = 0;
  this.updatePrev ();
  }
  if (this.pos.y & lt; 0) {
  this.pos.y = yükseklik;
  this.updatePrev ();
  }
  }
} 

08. Birçok parçacık yapın

Şimdi partikül yaratıldığı için birçok parçacık yapmayı düşünme zamanı. Bunu yapmak için tüm kodumuzun partikül fonksiyon sınıfının üstüne gidebilir. Burada, sistemin çalışmasını sağlamak için bir dizi küresel değişken ilan edilir. Kod sırasında çeşitli zamanlarda çağrılacaklar, böylece araştırılabilirler.

 var inc = 0.1;
var SCL = 100, zoff = 0;
varol, satırlar, hareketi = 0;
var parçacıkları = [];
var akış alanı;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, köri = 0, targetx = 0, hedef = 0; 

09. hepsini yukarı ayarlayın

Burada bildirilen kurulum işlevi, ekranın başlangıcına nasıl bakacağını ayarlar. Yapılan ilk algılama, ekranın genişliğinin ne olduğunu görmek. Nispeten büyükse, büyük bir görüntü yüklenirse, tuval oluşturulur ve bu, ekranın içine sığacak şekilde CSS aracılığıyla ölçeklenir.

 fonksiyon kurulumu () {
  if (windowwidth & gt; 1200) {
  img = loadImage ("varlıklar / stüdyo.png");
  var tuval = createcanvas (1920, 630);
  MaxSpeed ​​= 10.5;
  } 

10. Diğer ekranlar

Eğer ifadesinin geri kalanı, farklı ekran çözünürlüklerini kontrol eder ve bu ekran boyutuna en uygun olan bir görüntü yükler. Benzer şekilde farklı boyutlu kanvas elemanları oluşturulur. Bu, çoğunlukla bir mobil işlemini olduğundan daha fazla pikselle durdurmak içindir.

 Eğer (windowwidth & gt; 900) {
  IMG = LoadImage ("Varlıklar / Stüdyo-Tablet-Wide.png");
  var tuval = createcanvas (1200, 394);
  SCL = 60;
  MaxSpeed ​​= 7;
  } Başka {
  IMG = LoadImage ("Varlıklar / Stüdyo-Tablet-Tall.png");
  var tuval = createcanvas (700, 230);
  SCL = 40;
  MaxSpeed ​​= 5;
  } 

11. Bir ızgara yapın

Ekran boyutu çalışıldığında, tuval, index.html sayfasındaki başlık DIV etiketinin içine yerleştirilir. Birkaç sütun ve satır, genişliğe ve yüksekliğe dayanarak çalışılır; Görünmez bir ızgara gibi biraz. Son olarak, akış alanı için bir dizi ayarlanır.

 Canvas.Parent ('başlık');
COLS = ZEMİN (Genişlik / SCL);
satırlar = zemin (yükseklik / SCL);
Flowfield = Yeni dizi (COLS); 

12. Parçacıklar yapın

Parçacıkların sayısı, ekranın genişliğine göre ayarlanmıştır - Ekran 1920 pikselli ise 2500 partikül oluşturulur ve oradan aşağı doğru hareket eder. Bir döngü için yeni parçacıkları oluşturur. Ekranın arka plan rengi neredeyse tam beyaz olarak ayarlanır.

 Var NumParticles = Math.floor (((2500/1920) * genişlik);
  için (var i = 0; i & lt; numparticles; i ++) {
  parçacıklar [i] = yeni parçacık ();
  }
  arka plan (245);
} 

13. Ekranı çizin

Tüm hesaplamaların sonuçları, çizim fonksiyonundaki her çerçevede ekranda çizilir. İlk olarak, çok düşük bir opaklığa sahip açık gri bir dikdörtgen, daha önce çizilen şeyleri solmaya ekranı doldurur. Bundan sonra, partiküller doldurulmayacak şekilde yapılırken, dolgu kapanır.

 fonksiyon çizimi () {
  nostroke ();
  Doldur (245, 10);
  dik (0, 0, genişlik, yükseklik);
  Dolu değil();
  var yoff = 0; 

14. Bir akış etkisi oluşturun

Akış efektini almak için, gürültü değerlerini güncellemek için satır ve sütunlardan geçen iki 'için' döngüler için iki tane var. Bunlar daha sonra ekrandaki konumların her biri için partikülleri güncellemeye hazır olan gürültü değerinden açılı olarak değiştirilir.

 için (var y = 0; Y) satırlar; y ++) {
  var xoff = 0;
  için (var x = 0; x cols; x ++) {
  var indeksi = (x + y * col);
  var açısı = gürültü (xoff, yoff, zoff) * two_pi * 4;
  var v = p5.vector.Fromangle (açı); 

15. Diziyi güncelleyin

Akış dizisi açı ile güncellenir ve değerler arttırılır, böylece her pozisyonun ofsetinin artması her açısından arındırılır. Bu karmaşık görünebilir, ancak partiküllerin ekranda izlenmesi için rastgele akan hareket yaratır.

 v.setmag (1);
  Flowfield [index] = v;
  XOFF + = INC;
  }
  YOFF + = INC;
  Zoff + = 0.001;
  } 

16. Parçacıkları güncelleyin

Şimdi parçacıkların hepsi dizilerinde dolaştı. Her bir partikül, akış alanını takip etmeleri, ekranın kenarlarını kontrol etmesi, ekranın kenarlarını kontrol etmesi, hafifçe ve nihayet gösteriş işlevini kullanarak ekranda çizilmesi söylenir. Dosyayı kaydedin ve partiküllerin taşınmasını görmek için 'index.html' ni test edin.

 için (var i = 0; ben & lt; partiküller. Uzunluğu; i ++) {
  parçacıklar [i] .follow (flowfield);
  parçacıklar [i] .Update ();
  parçacıklar [i] .edges ();
  parçacıklar [i] .Scatter ();
  parçacıklar [i] .Show ();
  }
} 

17. Metni ekleyin

Metin, üstüne yerleştirilen bir maskedir. Bunu yapmak için, doğru görüntü parçacıkların üstüne yerleştirilir. Çizim işlevinin kapanış desteğinden önce bu kodu ekleyin. Şimdi metinle çalışmayı görmek için tarayıcıyı kaydedin ve kontrol edin.

 Görüntü (IMG, 0, 0); 

18. Fare pozisyonunu tespit edin

Fare konumu referans alınır ve X ve Y değerleri taşınabilecek derece açılara eşlenir. Y ekseninde, bu -25 ila 25 arasında olacak ve X ekseni için tam tersi olacaktır. Kalan kod, çekiliş fonksiyonunun bitiminden önce son kod eklendikten sonra yerleştirilmelidir.

 Targety = Math.Round (Harita (Mousex, 0, Genişlik, -25, 25));
Targetx = Math.Round (Harita (Mousey, 0, Yükseklik, 25, -25)); 

19. yerine kolaylıkla

Hedef pozisyon şimdi, derecelerin hedeflerine yavaşça ulaşması için biraz kolaylaştı. Bu, mevcut pozisyonu hedeften çıkarmak ve düşük bir sayı ile çarparak klasik bir algoritma kullanılarak oluşturulur.

 var vx = (Targetx - Currx) * 0.05;
var vy = (hedef - köri) * 0.05;
calcx + = vx;
calcy + = vy; 

20. CSS'yi yazın

Buradaki 'T' değişkeni, hesaplanan değerleri alır ve rotateksin ve dönerleştiricinin dönüşüm değerlerini kullanarak bir CSS dizesine yerleştirir. Geçerli pozisyon, tuvalin halihazırda döndürüldüğü konumdan hesaplanır.

 T = 'ROTATEX (' + CALCX + 'DEG) Döndürme (' + Calcy + 'Deg)';
currx = calcx;
Curry = calcy; 

21. bitirmek

Şimdi CSS, bu koddaki tuval elemanına uygulanır. Sayfayı kaydedin ve bunu tarayıcıda önizleyin. Şimdi fare, tuvalin dönüşünü tam olarak günceller, böylece fare hareket eder. Tabii ki bu boşluktaki parçacıkların tümü ekranda hareket eder.

 kanvas.style.webkittransform = t;
Canvas.Style.mStransform = t;
Canvas.Style.Transform = t; 

Bu makale başlangıçta Creative Web Design Magazine Web Tasarımcısı'nda yayınlandı. Satın almak Sayı 271 veya abone ol .

İlgili Makaleler:

• Tasarımcılar için en iyi 70 ücretsiz yazı tipi
• Mükemmel çevrimiçi okuma deneyimine 6 adım
• Ücretsiz çevrimiçi araç, fontlarınızın ne yapabileceğini gösterir.