Buat efek tipografi 3D interaktif

Tipografi selalu memainkan peran utama dalam persenjataan alat desainer apa pun karena mereka memilih jenis huruf yang tepat yang akan meningkatkan pesan dan menyajikan konteks yang tepat untuk apa yang dikomunikasikan. Selama delapan tahun terakhir, desainer web memiliki kemampuan untuk membawa Tipe Kustom. seperti Tipografi Kinetik. Untuk desain mereka dan memiliki kontrol tipografi yang serupa dengan yang dinikmati oleh desainer cetak.

Lihatlah banyak situs yang ditampilkan sebagai hak pemenang penghargaan atau menerima judul 'hari' dan Anda akan segera memperhatikan bahwa penggunaan tipografi mereka menjadi pusat desain, memungkinkan mereka untuk naik di atas kompetisi mereka. Ini dapat berkisar dari formulir huruf animasi, pergerakan reaktif ke interaksi pengguna, untuk menggunakan huruf tebal bentuk bentuk tengah (menjaga file tipografi Anda aman di penyimpanan awan ).

Jika Anda ingin membuat situs meraih perhatian dengan nol, coba a Pembangun Situs Web terlalu. Dan pastikan kinerja situs Anda dioptimalkan dengan top hosting web. .

• Font 3D: 9 Tip Top Tips

Dalam tutorial ini, efek jenisnya akan menggunakan bentuk huruf sebagai topeng untuk beberapa jalur partikel yang cepat dan mengalir bebas yang akan berputar secara dinamis dan bergerak melalui huruf. Tidak hanya akan ada animasi yang indah ini, tetapi karena ini akan diberikan ke Html5 kanvas Elemen, ini akan ditransformasikan dalam 3D untuk memutar ke arah mouse saat bergerak di sekitar layar. Ini sempurna untuk header situs atau hanya ketika Anda perlu mendapatkan perhatian pengguna untuk bertindak untuk bertindak.

Unduh file tutorial di sini

01. Mulai prosesnya

Buka folder 'Mulai' dari file proyek dalam IDE kode Anda. Proyek ini akan dimulai dengan membuat kelas objek partikel. Ini akan digunakan untuk membuat citra yang mengalir dalam teks dalam proyek. Buka file 'sketch.js' dan tambahkan variabel berikut untuk mulai membuat partikel dasar.

 Partikel fungsi () {
  this.pos = createvector (acak (lebar), acak ((tinggi - 100)));
  this.vel = createvector (0, 0);
  this.acc = createvector (0, 0);
  Ini.maxspeed = MaxSpeed;
  this.prevpos = this.pos.copy (); 

02. Perbarui partikel

Untuk memindahkan partikel, fungsi pembaruan akan dijalankan setiap bingkai, ini akan mengatasi kecepatan partikel dan akselerasi dengan kecepatan. Kecepatan pada akhirnya akan dibatasi oleh variabel global yang akan ditambahkan nanti. Kecepatan ditambahkan ke posisi partikel individu. Dengan membuat satu partikel, beberapa ribu akan dibuat di layar pada satu waktu.

 this.update = fungsi () {
  this.vel.add (this.acc);
  this.vel.limit (this.maxspeed);
  this.pos.add (ini.vel);
  this.acc.mult (0);
  } 

03. Pergilah dengan aliran

Untuk memberikan partikel gerakan yang mengalir, bidang aliran yang dihasilkan oleh kebisingan akan diikuti. Fungsi yang dibuat di sini memungkinkan vektor aliran yang akan dilewati dan kemudian akan diikuti, karenanya nama fungsi ini. Kekuatan arah vektor akan diterapkan pada partikel.

 this.follow = function (vectors) {
  var x = lantai (ini.pos.x / scl);
  var y = lantai (ini.pos.y / scl);
  var index = x + y * cols;
  var force = vektor [indeks];
  ini.plyforce (kekuatan);
  } 

04. Ikuti tetapi tidak terlalu dekat

Untuk menghentikan semua partikel bersama, yang dapat dengan mudah terjadi dengan gerakan semacam ini, partikel-partikel akan memiliki jumlah yang sangat kecil dari keacakan ditambahkan ke posisi mereka. Ini akan menyebabkan sedikit hamburan terjadi.

 ini.scatter = fungsi (vektor) {
  this.pos.x + = acak (-0.9, 0,9);
  this.pos.y + = acak (-0.9, 0,9);
  }
  ini.plyforce = fungsi (kekuatan) {
  this.acc.add (kekuatan);
  } 

05. Tampilkan partikel

Fungsi pertunjukan di sini menampilkan partikel. Hal pertama yang dilakukannya adalah menambahkan satu piksel stroke warna abu-abu muda untuk membuat garis. Garis diambil dari posisi saat ini ke posisi terakhir pada frame sebelumnya. Posisi sebelumnya disimpan untuk waktu berikutnya melalui loop.

 this.show = fungsi () {
  stroke (180);
  Strokeweight (1);
  baris (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  ini.updatePrev ();
  }
  ini.updateprev = fungsi () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Bungkus

Fungsi tepi berfungsi jika partikel mencapai tepi layar dan, jika demikian, bungkus di sekitar untuk datang ke sisi yang berlawanan. Bagian ini berkaitan dengan posisi X sehingga mendeteksi apakah lebih besar dari lebar layar kemudian mengirimkannya ke kiri tepi dan sebaliknya.

 this.edges = fungsi () {
  If (this.pos.x & gt; lebar) {
  ini.pos.x = 0;
  ini.updatePrev ();
  }
  if (this.pos.x & lt; 0) {
  this.pos.x = lebar;
  ini.updatePrev ();
  } 

07. Kegembiraan Wrapper

Kode ini adalah sisa deteksi tepi dan mendeteksi partikel pada sumbu Y untuk bagian atas dan bawah layar. Kurung di sini membungkusnya seluruh kelas partikel. Ini berarti dengan menggunakan kelas ini banyak partikel dapat dibuat.

 jika (ini.pos.y & gt; tinggi) {
  ini.pos.y = 0;
  ini.updatePrev ();
  }
  if (this.pos.y & lt; 0) {
  ini.pos.y = tinggi;
  ini.updatePrev ();
  }
  }
} 

08. Buat banyak partikel

Sekarang saat partikel diciptakan saatnya berpikir tentang membuat banyak partikel. Untuk melakukan ini semua kode kami dapat pergi di atas kelas fungsi partikel. Di sini sejumlah variabel global dinyatakan untuk memungkinkan sistem berjalan. Mereka akan dipanggil pada berbagai waktu selama kode, sehingga mereka kemudian dapat dieksplorasi.

 var inc = 0,1;
var scl = 100, zoff = 0;
var cols, baris, gerakan = 0;
var partikel = [];
var flowfield;
var img;
var maxspeed;
var t, calcx = 0, catalsy = 0, currx = 0, curry = 0, targetx = 0, targety = 0; 

09. Atur semuanya

Fungsi pengaturan, dinyatakan di sini, menetapkan bagaimana layar akan melihat awal. Deteksi pertama yang dilakukan adalah melihat apa lebar layar. Jika relatif besar, gambar besar dimuat, kanvas dibuat dan ini diskalakan melalui CSS agar sesuai dengan tampilan.

 fungsi pengaturan () {
  Jika (windowwidth & gt; 1200) {
  img = loadImage ("aset / studio.png");
  var canvas = createCanvas (1920, 630);
  MAXSPEED = 10.5;
  } 

10. Layar lain

Sisa dari pernyataan IF memeriksa resolusi layar yang berbeda dan memuat gambar yang paling tepat untuk ukuran layar itu. Serupa elemen kanvas berukuran berbeda dibuat. Ini terutama untuk menghentikan ponsel yang berurusan dengan lebih banyak piksel daripada harus.

 lain jika (windowwidth & gt; 900) {
  img = loadImage ("aset / studio-tablet-wide.png");
  Var Canvas = CreateCanvas (1200, 394);
  scl = 60;
  MaxSpeed ​​= 7;
  } lain {
  img = loadImage ("aset / studio-tablet-tall.png");
  Var Canvas = CreateCanvas (700, 230);
  scl = 40;
  MAXSPEED = 5;
  } 

11. Buat grid

Setelah ukuran layar dikerjakan kanvas ditempatkan di dalam tag div header di halaman index.html. Sejumlah kolom dan baris dikerjakan berdasarkan lebar dan tinggi; Ini sedikit seperti kisi yang tak terlihat. Akhirnya, array diatur untuk bidang aliran.

 Canvas.Parent ('Header');
cols = lantai (lebar / scl);
baris = lantai (tinggi / scl);
flowfield = array baru (cols); 

12. Buat partikel

Jumlah partikel diatur berdasarkan lebar layar - jika layar memiliki lebar 1920 piksel maka 2500 partikel akan dibuat dan bergerak ke bawah dari sana. A untuk loop menciptakan partikel baru. Warna latar belakang layar diatur ke hampir penuh putih.

 var numparticles = math.floor ((2500/1920) * lebar);
  untuk (var i = 0; i & lt; numparticles; i ++) {
  partikel [i] = partikel baru ();
  }
  latar belakang (245);
} 

13. Gambar layar

Hasil dari semua perhitungan diambil pada layar setiap frame dalam fungsi undian. Pertama, persegi panjang abu-abu terang dengan opacity yang sangat rendah mengisi layar untuk memudar apa yang telah ditarik sebelumnya. Setelah ini ditarik, pengisian dimatikan karena partikel akan terbuat dari stroke tidak mengisi.

 Fungsi Draw () {
  nostroke ();
  Isi (245, 10);
  Rection (0, 0, lebar, tinggi);
  nofill ();
  var yoff = 0; 

14. Buat efek aliran

Untuk mendapatkan efek aliran ada dua loop 'untuk' yang bergerak melalui baris dan kolom untuk memperbarui nilai kebisingan. Ini kemudian diubah menjadi sudut dari nilai kebisingan yang siap memperbarui partikel untuk masing-masing posisi di layar.

 untuk (var y = 0; y & lt; baris; y ++) {
  var xoff = 0;
  untuk (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  var angle = noise (xoff, yoff, zoff) * two_pi * 4;
  var v = p5.vector.fromAngle (sudut); 

15. Perbarui array

Array of flow diperbarui dengan sudut dan nilai-nilai meningkat sehingga offset setiap posisi meningkat setiap kali naik. Ini mungkin tampak rumit tetapi itu benar-benar hanya menciptakan gerakan mengalir acak untuk partikel untuk diikuti di layar.

 v.SetMag (1);
  Flowfield [Indeks] = V;
  xoff + = inc;
  }
  Yoff + = Inc;
  zoff + = 0,001;
  } 

16. Perbarui partikel

Sekarang partikel-partikel-partikel-partikel itu dilingkupi dalam array mereka. Setiap partikel individu disuruh mengikuti bidang aliran, untuk memperbarui, memeriksa tepi layar, sedikit menyebar dan akhirnya ditarik pada layar menggunakan fungsi pertunjukan. Simpan file dan uji 'index.html' untuk melihat partikel bergerak.

 untuk (var i = 0; i & lt; partikel.length; i ++) {
  partikel [i] .ikuti (flowfield);
  partikel [i] .update ();
  Partikel [i] .edges ();
  Partikel [i] .Scatter ();
  partikel [i] .show ();
  }
} 

17. Tambahkan teks

Teksnya adalah topeng yang ditempatkan di atas. Untuk melakukan ini, gambar yang benar diletakkan di atas partikel. Tambahkan kode ini sebelum penutupan penutup fungsi draw. Simpan dan periksa browser untuk melihat efeknya berfungsi dengan teks sekarang.

 Gambar (img, 0, 0); 

18. Mendeteksi posisi mouse

Posisi mouse direferensikan dan nilai X dan Y dipetakan ke sudut derajat yang dapat dipindahkan. Pada sumbu Y ini akan -25 hingga 25 dan sebaliknya untuk sumbu x. Kode yang tersisa harus ditempatkan setelah kode terakhir ditambahkan, sebelum akhir fungsi undian.

 Targety = math.round (peta (mousex, 0, lebar, -25, 25));
targetx = math.round (peta (mousey, 0, tinggi, 25, -25)); 

19. Kemudahan ke tempatnya

Posisi target sekarang diberi sedikit pelonggaran sehingga derajat perlahan-lahan mencapai target mereka. Ini dibuat menggunakan algoritma pelonggaran klasik untuk melepas posisi saat ini dari tujuan dan mengalikan dengan angka rendah.

 var vx = (targetx - currx) * 0,05;
var vy = (Targety - Curry) * 0,05;
Calcx + = VX;
CATCY + = VY; 

20. Tulis CSS

Variabel 'T' di sini mengambil nilai yang dihitung dan menempatkannya ke dalam string CSS menggunakan nilai transformasi rotatex dan rotatey. Posisi saat ini dihitung dari posisi kanvas saat ini diputar ke.

 t = 'rotatex (' + calcx + 'deg) Rotatey (' + Calcy + 'deg)';
currx = calcx;
Curry = CACKY; 

21. Habiskan

Sekarang CSS diterapkan pada elemen kanvas dalam kode ini. Simpan halaman dan pratinjau ini di browser. Sekarang mouse sepenuhnya memperbarui rotasi kanvas sehingga berubah ketika mouse bergerak. Tentu saja semua partikel di ruang itu bergerak dengannya di layar.

 kanvas.style.webkittransform = t;
kanvas.style.mstransform = t;
kanvas.style.transform = t; 

Artikel ini awalnya diterbitkan dalam desainer Web Majalah Desain Web Kreatif. Membeli masalah 271. atau langganan .

Artikel terkait:

• 70 font gratis terbaik untuk desainer
• 6 Langkah-langkah untuk pengalaman membaca online yang sempurna
• Alat online gratis menunjukkan kepada Anda apa yang dapat dilakukan font Anda