Bộ đếm số hoạt hình phổ biến trên web như một cách để hiển thị số. données để làm nổi bật giá trị của dịch vụ, nghiên cứu điển hình, v.v. Divi có một mô-đun bộ đếm số chuyên dụng có thể được sử dụng để dễ dàng tạo bộ đếm số động.

Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo bộ đếm số hoạt ảnh khi cuộn bằng cách sử dụng Divi. Sử dụng các tùy chọn vị trí và hiệu ứng cuộn của Divi, chúng ta sẽ thiết kế một bố cục đơn giản để hiển thị ngày tháng với các con số cuộn.

Phần 1: Tạo phần tiêu đề

Trong phần đầu tiên này, chúng ta sẽ tạo một tiêu đề đơn giản cho bố cục.

Đầu tiên, thêm một hàng một cột vào phần.

Đăng ký mô-đun phần divi

Sau đó thêm một mô-đun văn bản mới vào dòng.

Cập nhật nội dung của mô-đun văn bản với các thành phần sau:

Lưu ngày
Lưu ngày 1

Sau đó, cập nhật kiểu văn bản tiêu đề như sau:

  • Phông chữ 2: Prata
  • Mục 2 Kích thước văn bản: 130px (máy tính để bàn), 70px (máy tính bảng), 40px (điện thoại)
Sửa đổi tiêu đề Divi

Phần 2: Tạo quầy với hoạt hình cuộn

Trong phần tiếp theo này, chúng ta sẽ tạo ba bộ đếm sẽ làm hoạt hình các số cuộn cho đến khi chúng dừng hiển thị ngày (tháng, ngày và năm). Mỗi bộ đếm sẽ được xây dựng bằng cách sử dụng tổng cộng 5 mô-đun văn bản và một mô-đun phân tách. Mô-đun văn bản đầu tiên sẽ đóng vai trò là nhãn của bộ đếm (tức là tháng, ngày, năm). Bốn mô-đun văn bản tiếp theo, mỗi mô-đun sẽ chứa một số khác nhau (đang tiến hành) sẽ được làm động khi cuộn bằng cách sử dụng các hiệu số chuyển động dọc trong Divi. Mô-đun phân tách thấp hơn sẽ giúp ẩn các số bị tràn.

Đây là cách.

Thêm một dòng thứ hai

Bên dưới hàng hiện có, thêm một hàng khác vào cột.

Thêm một mô-đun divi mới

Cài đặt dòng

Trước khi thêm một mô-đun, hãy cập nhật các thông số hàng như sau:

  • Chiều rộng máng xối: 1
  • Đệm: cao 0px, thấp 0px
Cấu hình đường viền Divi

Thông số cột

Sau đó mở cài đặt cột và cập nhật điền như sau:

  • Đệm (bàn): thấp 100px
  • Đệm (máy tính bảng và điện thoại): 0px thấp
Cấu hình giãn cách cột Divi

Thêm một mô-đun văn bản

Sau đó thêm một mô-đun văn bản vào cột.

Thêm một mô-đun văn bản divi

Nội dung / nhãn

nội dung từ mô-đun văn bản, thêm từ “tháng”.

Chỉ định divi tháng

Cài đặt thiết kế văn bản

Một khi nội dung đã thêm, cập nhật cài đặt thiết kế như sau:

  • Màu nền: #ffffff
  • Phông chữ: Nói chuyện
  • Kích thước văn bản: 40px
  • Chiều cao của dòng văn bản: 2em
  • Chiều rộng: 100%
  • Đệm: 20 pixel ở trên cùng, 20 pixel ở dưới cùng, 20 pixel ở bên trái, 20 pixel ở bên phải
  • Chiều rộng đường viền dưới cùng: 5px
  • Màu của viền dưới: #eeeeee
Chức vụ

Sau đó, trong tab nâng cao, cập nhật các tùy chọn vị trí như sau:

  • Chức vụ: Tương đối
  • Chỉ số Z 1
Mô-đun wordpress Prata

Thêm một mô-đun văn bản cho vấn đề đầu tiên

Khi mô-đun văn bản đầu tiên đã có, chúng ta có thể bắt đầu thêm các số sẽ di chuyển trên cuộn. Để thêm số đầu tiên, hãy thêm một mô-đun văn bản mới trong mô-đun văn bản "Tháng" hiện có.

Thêm mô-đun văn bản người kể chuyện

Thêm số / nội dung

Sau đó cập nhật nhãn mô-đun văn bản để đọc Nhật ký num1 để tham khảo dễ dàng hơn. Sau đó cập nhật nội dung với số Số 01 XNUMX.

Thêm mô-đun số divi

Cài đặt thiết kế cho số

Trong tab thiết kế, cập nhật các thông tin sau:

  • Phông chữ: Prata
  • Màu văn bản văn bản: # 8ab2d3
  • Kích thước văn bản văn bản: 70px
  • Khoảng cách chữ văn bản: 4px
  • Chiều cao dòng văn bản: 1.5em
  • Đệm: trái 20px
Cấu hình màu Divi

GHI CHÚ: Các số có kích thước văn bản là 70px và chiều cao dòng là 1.5em, có nghĩa là tổng chiều cao của mô-đun văn bản sẽ gần bằng 100px. Điều này rất quan trọng để ghi nhớ bất cứ khi nào chúng ta bắt đầu thêm các độ lệch chuyển động dọc. Ví dụ, việc thêm phần bù dọc của 1 100 vào mô-đun văn bản sẽ di chuyển mô-đun văn bản chính xác XNUMXpx, chiều cao của mô-đun văn bản.

Hiệu ứng cuộn cho số đầu tiên

Thêm các hiệu ứng cuộn sau vào mô-đun văn bản.

Trong Tab Chuyển động dọc, cập nhật các thông tin sau:

  • Kích hoạt chuyển động dọc: CÓ
  • Bắt đầu bù: 1 (ở mức 10%)
  • Độ lệch trung bình: 0 (ở mức 20%)
  • Kết thúc bù: -1 (ở mức 30%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Kích hoạt mờ dần trong và ngoài: CÓ
  • Độ mờ ban đầu: 0% (ở mức 10%)
  • Độ mờ trung bình: 100% (ở mức 20%)
  • Độ mờ kết thúc: 0% (đến 30%)

Đảm bảo đặt trình kích hoạt cho hiệu ứng chuyển động ở đầu clip:

  • Kích hoạt hiệu ứng chuyển động: Phần tử đầu
Cấu hình của văn bản mô-đun hoạt hình divi

Tạo mô-đun văn bản cho số thứ hai

Nhân đôi số đầu tiên

Khi số đầu tiên được tạo, hãy nhân bản nó để tạo mô-đun văn bản số thứ hai. Sau đó, cập nhật nhãn trong chế độ xem lớp để tham khảo tốt hơn.

Nhân bản mô-đun văn bản divi 1

Cập nhật số / nội dung

Mở các tham số của mô-đun văn bản kỹ thuật số thứ hai và cập nhật nội dung với số "02".

Lưu số 2 divi

Cập nhật vị trí

Sau đó cập nhật các tùy chọn vị trí như sau:

  • Vị trí: Tuyệt đối
  • Độ lệch dọc: 126px
Sửa đổi vị trí của mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn như sau:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 20%)
  • Độ lệch trung bình: 0 (ở mức 30%)
  • Kết thúc bù: -1 (ở mức 40%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 20%)
  • Độ mờ trung bình: 100% (ở mức 30%)
  • Độ mờ kết thúc: 0% (đến 40%)
Hiệu ứng cuộn hoạt hình divi

Tạo một mô-đun văn bản cho vấn đề thứ ba

Nhân đôi số thứ hai

Để tạo mô-đun văn bản cho số thứ ba, sao chép mô-đun văn bản cho số thứ hai.

Bản sao mô-đun văn bản số 3

Cập nhật số / nội dung

Cập nhật nội dung với số "03".

Sửa đổi mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 30%)
  • Độ lệch trung bình: 0 (ở mức 40%)
  • Kết thúc bù: -1 (ở mức 50%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 30%)
  • Độ mờ trung bình: 100% (ở mức 40%)
  • Độ mờ kết thúc: 0% (đến 50%)
Chỉnh sửa hoạt ảnh mô-đun văn bản

Tạo một mô-đun văn bản cho vấn đề thứ tư

Vấn đề trùng lặp thứ ba

Để tạo số thứ tư cho bộ đếm cuộn, nhân đôi mô-đun văn bản cho số thứ ba.

Bản sao mô-đun văn bản divi số 4

Cập nhật số / nội dung

Cập nhật nội dung với số "04".

Định cấu hình giá trị mô-đun văn bản divi

Cập nhật hiệu ứng cuộn

Sau đó cập nhật các hiệu ứng cuộn:

Trên tab Chuyển động theo chiều dọc, cập nhật thông tin sau:

  • Bắt đầu bù: 1 (ở mức 40%)
  • Độ lệch trung bình: 0 (ở mức 50%)
  • Kết thúc bù: 0 (ở mức 60%)

Trên tab Làm mờ dần và Làm mờ dần, hãy cập nhật thông tin sau:

  • Độ mờ ban đầu: 0% (ở mức 40%)
  • Độ mờ trung bình: 100% (ở mức 50%)
  • Độ mờ kết thúc: 100% (đến 60%)
Mô-đun cấu hình hoạt ảnh 4 divi

Thêm một dấu phân cách thấp hơn

Trong mô-đun văn bản cuối cùng, hãy thêm một mô-đun phân tách mới. Điều này sẽ được sử dụng để ẩn phần tràn dưới cùng của văn bản cuộn trong chế độ xem.

Thêm mô-đun phân tách divi

Sau đó chọn KHÔNG để hiển thị dải phân cách.

Không hiển thị dấu phân cách divi

Cài đặt kiểu và vị trí

Cập nhật thiết kế dải phân cách như sau:

  • Màu nền: #ffffff
  • Chiều rộng: 100%
  • Chiều cao: 100px
  • Độ rộng đường viền trên cùng: 5px

Trên tab Nâng cao, cập nhật những điều sau:

  • Vô hiệu hóa trên: điện thoại và máy tính bảng
  • Vị trí: Tuyệt đối
  • Vị trí: phía dưới bên trái

QUAN TRỌNG: Khoảng trống mà dấu phân tách sẽ chiếm trước đó đã được tạo trước đó bằng cách thêm phần lấp đầy dưới cùng 100 pixel vào cột. Nếu bạn không thêm phần đệm này, dấu phân cách sẽ chồng lên các chữ số.

Tạo các quầy và cột bổ sung

Nhân đôi cột 1 và cập nhật nội dung

Để tạo bộ đếm mới, sao chép cột 1. Điều này sẽ tạo một cột thứ hai với tất cả các yếu tố được đặt tự động.

Sau đó, tất cả những gì bạn cần làm là cập nhật nội dung của tất cả các mô-đun văn bản với các văn bản và số mới.

Sao chép toàn bộ cột divi

Nhân đôi cột 2 và cập nhật nội dung

Sau khi nội dung của tất cả các mô-đun văn bản được cập nhật trong cột 2, hãy sao chép cột 2 để tạo bộ đếm thứ ba trong năm. Sau đó cập nhật nội dung của từng mô-đun văn bản khi cần thiết.

Kết quả cuối cùng

Đây là kết quả cuối cùng.

Tài nguyên khác

cuối cùng suy nghĩ

Bố cục đơn giản này với bộ đếm số hoạt hình cuộn sẽ hữu ích cho việc hiển thị données kỹ thuật số theo một cách mới và độc đáo. Hãy thoải mái bỏ khái niệm ngày tháng và sử dụng bộ đếm cho bất kỳ thứ gì bạn có thể mơ ước!