Tạo hiệu ứng kiểu chữ 3D tương tác

Typography luôn chơi một phần chính trong bất kỳ công cụ nào của bất kỳ công cụ nào khi họ chọn kiểu chữ bên phải sẽ nâng cao thông điệp và trình bày bối cảnh phù hợp cho những gì đang được truyền đạt. Trong tám năm qua, các nhà thiết kế web đã có khả năng mang vào Kiểu chữ tùy chỉnh nhu la typography động học. đến thiết kế của họ và có điều khiển đánh máy tương tự với những người được thiết kế in rất thích.

Hãy xem nhiều trang web được đặc trưng là tiêu đề 'trang web trong ngày' từng đoạt giải thưởng và bạn sẽ sớm nhận thấy rằng việc sử dụng typography của họ trở thành trung tâm đối với thiết kế, cho phép họ vượt lên trên cạnh tranh của họ. Điều này có thể bao gồm từ các hình thức thư hoạt hình, chuyển động phản ứng với các tương tác của người dùng, để sử dụng in đậm các dạng trung tâm lấy từ (giữ cho các tệp typography của bạn an toàn trong lưu trữ đám mây ).

Nếu bạn muốn tạo một trang web lấy chú ý với Zero Fuss, hãy thử một người tạo ra trang web quá. Và hãy chắc chắn rằng hiệu suất của trang web của bạn được tối ưu hóa với hàng đầu web hosting .

• Phông chữ 3D: 9 Mẹo loại hàng đầu

Trong hướng dẫn này, hiệu ứng loại sẽ sử dụng các hình dạng của các chữ cái dưới dạng mặt nạ cho một số đường mòn hạt tự do nhanh, chảy tự động sẽ xoáy và di chuyển qua các chữ cái. Không chỉ sẽ có hình ảnh động đẹp này, mà như thế này sẽ được hiển thị trên Canvas HTML5 Phần tử, điều này sẽ được chuyển đổi trong 3D để xoay về phía chuột khi nó di chuyển xung quanh màn hình. Điều này là hoàn hảo cho các tiêu đề trang web hoặc chỉ khi bạn cần lấy sự chú ý của người dùng để gọi hành động.

Tải về các tập tin hướng dẫn tại đây

01. Bắt đầu quá trình

Mở thư mục 'Bắt ​​đầu' từ các tệp dự án trong mã IDE của bạn. Dự án sẽ bắt đầu bằng cách tạo lớp đối tượng hạt. Điều này sẽ được sử dụng để tạo hình ảnh chảy trong văn bản trong dự án. Mở tệp 'Sketch.js' và thêm biến sau để bắt đầu tạo hạt cơ sở.

 Hàm hàm () {
  .pose = createvector (ngẫu nhiên (chiều rộng), ngẫu nhiên ((Chiều cao - 100)));
  that.vel = creatrevector (0, 0);
  this.acc = creatrevector (0, 0);
  therm.maxspeed = MaxSpeed;
  this.prevpos = this.pos.copy (); 

02. Cập nhật hạt

Để di chuyển hạt, một chức năng cập nhật sẽ được chạy mỗi khung, điều này sẽ xử lý vận tốc của hạt và gia tốc đến vận tốc. Vận tốc cuối cùng sẽ bị giới hạn bởi một biến toàn cục sẽ được thêm vào sau. Vận tốc được thêm vào vị trí của hạt riêng lẻ. Bằng cách tạo một hạt, vài nghìn sẽ được tạo trên màn hình bất cứ lúc nào.

 NÀY.UPDATE = Hàm () {
  this.vel.add (this.acc);
  this.vel.limit (thether.maxspeed);
  this.pos.add (that.vel);
  this.acc.mult (0);
  } 

03. Đi với dòng chảy

Để cung cấp các hạt chuyển động chảy của chúng, một trường dòng chảy được tạo ra bởi tiếng ồn sẽ được tuân theo. Hàm được tạo ở đây cho phép vectơ của dòng chảy được truyền vào và sau đó nó sẽ được tuân theo, do đó tên của hàm này. Lực của hướng vector sẽ được áp dụng cho hạt.

 này.follow = hàm (vectơ) {
  var x = tầng (this.pos.x / scl);
  var y = tầng (this.pos.y / scl);
  var index = x + y * cols;
  var force = vectơ [index];
  this.applyforce (lực lượng);
  } 

04. Thực hiện theo nhưng không quá kỹ

Để ngăn tất cả các hạt bó lại với nhau, có thể dễ dàng xảy ra với loại chuyển động này, các hạt sẽ có một lượng ngẫu nhiên rất nhỏ được thêm vào vị trí của chúng. Điều này sẽ gây ra một chút phân tán xảy ra.

 This.Scatter = hàm (vectơ) {
  this.pos.x + = ngẫu nhiên (-0,9, 0,9);
  .pos.y + = ngẫu nhiên (-0,9, 0,9);
  Không thể
  Điều này.applyforce = Chức năng (lực lượng) {
  this.acc.add (lực lượng);
  } 

05. Hiển thị hạt

Chức năng hiển thị ở đây hiển thị hạt. Điều đầu tiên nó làm là thêm một nét pixel của một màu xám nhạt để tạo dòng. Dòng được vẽ từ vị trí hiện tại của nó đến vị trí cuối cùng của nó trên khung trước. Vị trí trước đó được lưu trữ cho lần sau thông qua vòng lặp.

 This.Show = hàm () {
  đột quỵ (180);
  vuốt ve (1);
  dòng (this.pos.x, this.pos.y, this.prevpos.x, this.prevpos.y);
  this.updateprev ();
  Không thể
  this.updateprev = hàm () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  } 

06. Bọc xung quanh.

Chức năng các cạnh hoạt động nếu hạt đạt đến cạnh màn hình và, nếu vậy, hãy kết thúc nó xung quanh để đến phía đối diện. Phần này liên quan đến vị trí x để nó đang phát hiện nếu nó lớn hơn chiều rộng của màn hình sau đó gửi nó sang cạnh trái và ngược lại.

 Town.edges = hàm () {
  if (this.pos.x & gt; Chiều rộng) {
  this.pos.x = 0;
  this.updateprev ();
  Không thể
  if (this.pos.x & lt; 0) {
  this.pos.x = width;
  this.updateprev ();
  } 

07. Delight của Wrapper

Mã này là phần còn lại của phát hiện cạnh và nó phát hiện hạt trên trục Y cho đỉnh và dưới cùng của màn hình. Các dấu ngoặc ở đây kết thúc toàn bộ lớp hạt. Điều này có nghĩa là bằng cách sử dụng lớp này nhiều hạt có thể được tạo.

 if (this.pos.y & gt; Chiều cao) {
  this.pos.y = 0;
  this.updateprev ();
  Không thể
  if (this.pos.y & lt; 0) {
  this.pos.y = Chiều cao;
  this.updateprev ();
  Không thể
  Không thể
} 

08. Làm nhiều hạt

Bây giờ khi hạt được tạo ra đã đến lúc nghĩ về việc tạo ra nhiều hạt. Để thực hiện tất cả các mã của chúng tôi có thể vượt lên trên lớp chức năng hạt. Ở đây một số biến toàn cục được khai báo để cho phép hệ thống chạy. Chúng sẽ được gọi tại nhiều thời điểm trong mã, để chúng có thể được khám phá.

 var inc = 0,1;
var scl = 100, zoff = 0;
var cols, hàng, chuyển động = 0;
hạt var = [];
Var Flowfield;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, Currx = 0, Curry = 0, TargetX = 0, Targety = 0; 

09. Đặt tất cả lên

Chức năng thiết lập, được khai báo ở đây, đặt cách màn hình sẽ nhìn vào đầu. Phát hiện đầu tiên được thực hiện là để xem chiều rộng của màn hình là gì. Nếu nó tương đối lớn, một hình ảnh lớn được tải, khung vẽ được tạo và điều này được thu nhỏ thông qua CSS để phù hợp trong màn hình.

 Cài đặt chức năng () {
  Nếu (WindowWidth & GT; 1200) {
  IMG = loadImage ("tài sản / studio.png");
  var canvas = createecanvas (1920, 630);
  MaxSpeed ​​= 10.5;
  } 

10. Màn hình khác

Phần còn lại của câu lệnh IF kiểm tra độ phân giải màn hình khác nhau và tải một hình ảnh phù hợp nhất với kích thước màn hình đó. Các yếu tố vải có kích thước tương tự khác nhau được tạo ra. Điều này chủ yếu là để ngăn chặn một giao dịch di động với nhiều pixel hơn so với nó.

 Khác nếu (WindowWidth & GT; 900) {
  IMG = LoadImage ("Tài sản / Studio-Tablet-Wide.png");
  var canvas = createecanvas (1200, 394);
  scl = 60;
  MaxSpeed ​​= 7;
  } other {
  IMG = loadImage ("Tài sản / Studio-Tablet-Tall.png");
  var canvas = createecanvas (700, 230);
  scl = 40;
  MaxSpeed ​​= 5;
  } 

11. Làm một lưới

Khi kích thước màn hình được tạo ra khung vẽ được đặt bên trong thẻ div tiêu đề trong trang index.html. Một số cột và hàng được thực hiện dựa trên chiều rộng và chiều cao; Nó hơi giống một lưới vô hình. Cuối cùng, một mảng được đặt cho trường Flow.

 Canvas.Parent ('tiêu đề');
cols = sàn (chiều rộng / scl);
hàng = sàn (chiều cao / scl);
Flowfield = mảng mới (cols); 

12. Làm hạt

Số lượng hạt được thiết lập dựa trên chiều rộng của màn hình - nếu màn hình rộng 1920 pixel, 2500 hạt sẽ được tạo và nó di chuyển xuống từ đó. A cho vòng lặp tạo ra các hạt mới. Màu nền của màn hình được đặt thành gần như đầy màu trắng.

 var numparticles = math.floor ((2500/1920) * Chiều rộng);
  cho (var i = 0; i & lt; numparticles; i ++) {
  các hạt [i] = hạt mới ();
  Không thể
  nền (245);
} 

13. Vẽ màn hình

Kết quả của tất cả các tính toán được vẽ trên màn hình mỗi khung trong hàm vẽ. Thứ nhất, một hình chữ nhật màu xám nhạt với độ mờ rất thấp sẽ lấp đầy màn hình để phai những gì đã được vẽ trước đó. Sau khi được rút ra, Fill bị tắt vì các hạt sẽ được tạo thành từ các nét không lấp đầy.

 Chức năng vẽ () {
  nostroke ();
  điền (245, 10);
  it (0, 0, chiều rộng, chiều cao);
  không có điền();
  var yoff = 0; 

14. Tạo hiệu ứng dòng chảy

Để có được hiệu ứng dòng chảy, có hai vòng 'cho' các vòng chuyển qua các hàng và cột để cập nhật các giá trị nhiễu. Chúng sau đó được đổi thành các góc từ giá trị nhiễu đã sẵn sàng để cập nhật các hạt cho từng vị trí trên màn hình.

 cho (var y = 0; y & lt; hàng; y ++) {
  var xoff = 0;
  cho (var x = 0; x & lt; cols; x ++) {
  var index = (x + y * cols);
  var góc = tiếng ồn (xoff, yoff, zoff) * Two_pi * 4;
  var v = p5.vector.fromangle (góc); 

15. Cập nhật mảng

Mảng luồng được cập nhật với góc và các giá trị được tăng lên để độ lệch của mỗi vị trí được tăng lên mỗi lần nó tăng lên. Điều này có vẻ phức tạp nhưng nó thực sự chỉ tạo ra chuyển động chảy ngẫu nhiên cho các hạt để theo dõi trên màn hình.

 v.setmag (1);
  Flowfield [Index] = V;
  Xoff + = Inc;
  Không thể
  yoff + = inc;
  zoff + = 0,001;
  } 

16. Cập nhật các hạt

Bây giờ các hạt đều được lặp qua trong mảng của chúng. Mỗi hạt riêng lẻ được yêu cầu theo dõi trường Flow, để cập nhật, kiểm tra các cạnh của màn hình, phân tán một chút và cuối cùng được vẽ trên màn hình bằng chức năng hiển thị. Lưu tệp và kiểm tra 'index.html' để xem các hạt di chuyển về.

 cho (var i = 0; i & lt; hạt.length; i ++) {
  các hạt [i] .follow (Flowfield);
  các hạt [i] .update ();
  các hạt [i] .edges ();
  các hạt [i] .scatter ();
  các hạt [i] .show ();
  Không thể
} 

17. Thêm văn bản

Các văn bản là một mặt nạ được đặt trên đầu trang. Để làm điều này, hình ảnh chính xác được đặt trên đỉnh của các hạt. Thêm mã này trước khi nẹp đóng của hàm vẽ. Lưu và kiểm tra trình duyệt để xem hiệu ứng hoạt động với văn bản ngay bây giờ.

 Hình ảnh (IMG, 0, 0); 

18. Phát hiện vị trí chuột

Vị trí chuột được tham chiếu và các giá trị X và Y được ánh xạ lên các góc độ có thể được di chuyển. Trên trục Y, đây sẽ là -25 đến 25 và ngược lại cho trục X. Mã còn lại nên được đặt sau khi mã cuối cùng đã được thêm vào, trước khi kết thúc chức năng vẽ.

 Targety = Math.Round (Map (Mousex, 0, Width, -25, 25));
targetx = math.round (bản đồ (chuột, 0, chiều cao, 25, -25)); 

19. Dễ vào vị trí

Vị trí mục tiêu hiện được cho một chút nới lỏng để độ chậm đến đích. Điều này được tạo ra bằng cách sử dụng thuật toán nới lỏng cổ điển cất cánh vị trí hiện tại từ đích và nhân với một số thấp.

 var vx = (TargetX - Currx) * 0,05;
var vy = (targety - Curry) * 0,05;
CalcX + = VX;
calcy + = vy; 

20. Viết CSS

Biến 'T' ở đây lấy các giá trị được tính toán và đặt chúng vào chuỗi CSS bằng cách sử dụng các giá trị chuyển đổi của rotatex và rotatty. Vị trí hiện tại được tính từ vị trí khung vẽ hiện đang được xoay đến.

 T = 'rotatex (' + calcx + 'deg) rotatey (' + calcy + 'deg)';
Currx = CalcX;
Curry = calcy; 

21. Kết thúc

Bây giờ CSS được áp dụng cho phần tử Canvas trong mã này. Lưu trang và xem trước điều này trong trình duyệt. Bây giờ chuột cập nhật đầy đủ sự quay của khung vẽ để nó quay khi chuột di chuyển. Tất nhiên tất cả các hạt trong không gian đó di chuyển với nó trên màn hình.

 Canvas.style.webkitTransform = t;
canvas.style.msstransform = t;
canvas.style.transform = t; 

Bài viết này ban đầu được xuất bản trong nhà thiết kế web thiết kế web sáng tạo. Mua Vấn đề 271. hoặc là đăng ký. .

Những bài viết liên quan:

• 70 phông chữ miễn phí tốt nhất cho các nhà thiết kế
• 6 bước để trải nghiệm đọc trực tuyến hoàn hảo
• Công cụ trực tuyến miễn phí cho bạn thấy những gì phông chữ của bạn có thể làm