Tạo hiệu ứng văn bản lung lay với JavaScript

Sep 13, 2025

Cách

Giới thiệu các hiệu ứng cho văn bản và typography có thể thêm một quan điểm hoàn toàn mới cho Kinh nghiệm người dùng trên một trang web. Nhưng văn bản sẽ được đọc, và quá thông minh hoặc thông minh với hiệu ứng có thể đánh bại mục đích của nó.

Vì vậy, hãy thông minh, thông minh, nhưng đảm bảo rằng của bạn typography động học. hiệu ứng thực sự hoạt động, giống như nó làm trên Trang web của Patrick Heng - Nổi bật trong hình ảnh trên. Đọc để tìm hiểu làm thế nào...

1. Tạo văn bản giới thiệu

Mở Tệp dự án Và bạn sẽ thấy rằng có thư viện Velocity.js và Blast.js. Blast tách văn bản lên, trong khi vận tốc là một động cơ mười hai. Có ba biến bù để làm cho mỗi phần của văn bản di chuyển theo các khoảng thời gian khác nhau.

 & lt; script & gt;
var offset1 = 0;
var offset2 = 0;
var offset3 = 0;
& lt; / script & gt;

2. Chia văn bản

Sử dụng Blast, mỗi ký tự văn bản được chia thành phần tử SPAN của riêng họ. Sau đó, lớp văn bản trên cùng được lặp qua và bù được tăng lên cho mỗi chữ cái để chúng hoạt động độc lập.

 $ ("H1"). Vụ nổ ({
  Dấu phân cách: "Nhân vật"
});
Chức năng Anim () {
  var $ spans = $ ("# top"). Tìm ('span');
  $ spans.each (hàm () {
  offset1 + = 40;

3. Thêm vận tốc

Bây giờ thư viện Velocity thêm các chuyển động và độ mờ để các chữ cái di chuyển lên và mờ dần. Mỗi chữ cái được bù và thời lượng và độ dễ dàng được đặt cho mỗi chữ cái.

 $ (này) .Velocity ({
  Dịch: -100,
  Opacity: 1.
  }, {
  Trì hoãn: Offset1,
  Thời lượng: 800,
  nới lỏng: "EASEOUTBACK"
  });
  });
}

4. Gọi hành động

Bây giờ chức năng 'Anim' được gọi và điều này kích hoạt hoạt hình để bắt đầu. Một hàm 'setTimeout' hiện đang làm lảo đảo một khối văn bản thứ hai sẽ có màu vàng. Một lần nữa, nó được kích hoạt bằng cách sử dụng vận tốc như trong ví dụ đầu tiên.

 Anim ();
setTimeout (hàm () {
  var $ spans = $ ("# giữa"). Tìm ('span');
  $ spans.each (hàm () {
  offset2 + = 40;
  $ (cái này) .Velocity ({
  Dịch: -100,
  Opacity: 0.8.
  }, {

5. Di chuyển trên

Độ trễ, thời gian và nới lỏng được đặt để văn bản màu vàng thứ hai di chuyển chính xác. Sau đó, phần cuối cùng của văn bản màu cam được kiểm soát trong chức năng 'SETTIMEOUT' tiếp theo để trì hoãn việc di chuyển này lâu hơn một chút trước khi bắt đầu.

 Độ trễ: Offset2,
  Thời lượng: 800,
  nới lỏng: "EASEOUTBACK"
  });
  });
}, 100);
setTimeout (hàm () {
  var $ spans = $ ("# dưới"). Tìm ('span');

6. Thêm chữ cái cuối cùng

Bây giờ các chữ cái cuối cùng được chuyển vào vị trí. Điều này mang lại hiệu ứng tương tự như Trang web của Patrick Heng , có các lớp văn bản di chuyển. Patrick thực sự sử dụng WebGL để di chuyển văn bản nhưng đây là một cách đơn giản hơn với các yếu tố DOM.

 $ spans.each (hàm () {
  offset3 + = 40;
  $ (cái này) .Velocity ({
  Dịch: -100,
  Opacity: 0.8.
  }, {
  Trì hoãn: Offset3,
  Thời lượng: 800,
  nới lỏng: "EASEOUTBACK"
  });
  });
}, 150);

Tìm hiểu thêm tại Gener London

Generate graphic — Xem Richard Rutter, Sarah Parmenter và Bruce Lawson, và nhiều hơn nữa nói chuyện tại Generate London 2018

Richard Rutter có một tình yêu và niềm đam mê cho typography và đồng sáng lập Fontdeck. , một dịch vụ phông chữ web tiên phong. Là một nhà truyền giáo kiểu chữ Web tự bổ nhiệm, Richard là người tổ chức trưởng của Clearleft Ampersand. hội nghị kiểu chữ web.

Tại Generate London 2018, hội thảo của ông sẽ giúp bạn tạo các trang web với kiểu chữ Web hấp dẫn, thích hợp, biểu cảm và dễ đọc, điều chỉnh cho màn hình của tất cả các hình dạng và kích cỡ. Bạn sẽ học cách kết hợp thủ công hàng thế kỷ cũ với công nghệ tiên tiến - bao gồm cả phông chữ biến - để thiết kế và phát triển những trải nghiệm tốt nhất cho độc giả của bạn.

Trong suốt một ngày, bạn sẽ tham gia các hoạt động thực hành, áp dụng từng kỹ thuật mới cho một trang web ví dụ chi tiết mà bạn có thể lấy lại với bạn. Điều này sẽ tạo thành tài nguyên hoàn hảo để bạn tham khảo trong tương lai. Và nếu điều đó là không đủ, mọi người tham dự sẽ bỏ đi với một bản sao điện tử miễn phí của Richard được hoan nghênh Cuốn sách kiểu chữ web .

Đừng bỏ lỡ, nhận vé của bạn bây giờ

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

JavaScript hoàn hảo trong 1.000 dự án
Mẹo loại kỹ thuật số chuyên nghiệp cho các nhà thiết kế đồ họa
7 tài nguyên loại web tuyệt vời

Tạo hiệu ứng văn bản lung lay với JavaScript

1. Tạo văn bản giới thiệu

2. Chia văn bản

3. Thêm vận tốc

4. Gọi hành động

5. Di chuyển trên

6. Thêm chữ cái cuối cùng

Tìm hiểu thêm tại Gener London

Cách - Các bài báo phổ biến nhất

Cách sử dụng hình ảnh tham khảo: 13 mẹo thiết yếu cho các nghệ sĩ

Cách nhanh chóng phác thảo tay

Thêm hiệu ứng trục trặc vào trang web của bạn

Cách nhấn mạnh điểm đầu mối của một hình ảnh

Cách tạo tài sản kỹ thuật số

Vẽ một bức chân dung như Van Gogh

Cách tạo chữ 3D trong Illustrator

Cách tạo Snapchat Geofilter trong Photoshop

Thể loại