Bỏ qua đến nội dung chính

Cách tạo bộ đếm vòng tròn sống động trong khi cuộn với Divi

Divi: chủ đề WordPress dễ sử dụng nhất

Divi: Chủ đề WordPress tốt nhất mọi thời đại!

hơn Tải xuống 701.000, Divi là chủ đề WordPress phổ biến nhất trên thế giới. Nó là hoàn chỉnh, dễ sử dụng và đi kèm với hơn 62 mẫu miễn phí. [Khuyến nghị]

Bộ đếm vòng tròn hoạt hình là một cách phổ biến để trình bày thông tin (như thống kê hoặc chỉ số) trên trang web với sự tương tác thú vị. Trên thực tế, bạn có thể đã quen thuộc với mô-đun bộ đếm vòng tròn của Divi, giúp việc thêm bộ đếm vòng tròn vào trang Divi của bạn nhanh chóng và dễ dàng. 

Tuy nhiên, trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách tạo các bộ đếm vòng kết nối hoàn toàn tùy chỉnh hoạt động khi bạn cuộn! Chúng tôi sẽ không cần bất kỳ CSS tùy chỉnh bên ngoài nào để tạo chúng. Bí quyết là tận dụng chức năng Lớp của Divi để quản lý một số mô-đun hoạt hình và xếp chồng với độ chính xác.

Kết quả có thể

Dưới đây là tổng quan nhanh về các vạch chia vòng tròn hoạt hình mà chúng ta sẽ tạo trong hướng dẫn này.

quầy vòng tròn hoạt hình trên cuộn

Tạo bốn bộ đếm vòng tròn trở nên sống động khi cuộn với Divi

Cấu hình phần và dòng

Đầu tiên, thêm một hàng bốn cột vào phần mặc định.

quầy vòng tròn hoạt hình trên cuộn

Tiếp theo, mở cài đặt phần và thêm lề trên và dưới để chúng ta có đủ không gian để kiểm tra hiệu ứng cuộn của các bộ đếm vòng tròn mà chúng ta sẽ tạo.

  • Ký quỹ: cao 85vh, thấp 85vh
quầy vòng tròn hoạt hình trên cuộn

Sau đó mở cài đặt dòng và cập nhật như sau:

  • Chiều rộng máng xối: 1
  • Chiều rộng: 100%
  • Chiều rộng tối đa: 1200px
quầy vòng tròn hoạt hình trên cuộn

Sử dụng chế độ xem Lớp

Trước khi bạn bắt đầu tạo bộ đếm vòng tròn động, hãy đảm bảo rằng bạn triển khai chức năng Lớp Divi. Bạn có thể thực hiện việc này bằng cách nhấp vào biểu tượng lớp màu xám trong menu cài đặt dưới cùng.

quầy vòng tròn hoạt hình trên cuộn

Vì chúng ta sẽ tạo ra rất nhiều phần tử (hoặc lớp) chồng lên nhau, hộp lớp chắc chắn sẽ rất hữu ích để quản lý các lớp của chúng ta trong tương lai.

Tạo bộ đếm vòng tròn hoạt hình # 1 (25%)

Bộ đếm vòng tròn hoạt hình đầu tiên này sẽ tạo hoạt ảnh lên đến 25% hình tròn trên cuộn và có phần trăm văn bản tương ứng với tâm sẽ hòa vào cuộn. Để xây dựng thiết kế bộ đếm vòng tròn hoàn chỉnh, chúng tôi sẽ sử dụng một số mô-đun và phân chia văn bản chồng lên nhau. Đây là cách để làm điều đó.

Vòng tròn phía sau

Để tạo vòng tròn phía sau, chúng ta sẽ sử dụng một mô-đun phân tách mà chúng ta sẽ định hình thành một vòng tròn và tạo màu nền cho nó.

Thêm một mô-đun tách
quầy vòng tròn hoạt hình trên cuộn

Kéo dải phân cách lên trong chế độ xem lớp và thay đổi nhãn thành "hình tròn". Sau đó, mở cài đặt của mô-đun tách và cập nhật những điều sau:

  • Hiển thị dải phân cách: KHÔNG
  • Màu nền: # c3e0e5
quầy vòng tròn hoạt hình trên cuộn

Cập nhật các thông số thiết kế như sau:

Dễ dàng tạo trang web của bạn với Elementor

Elementor cho phép bạn dễ dàng tạo ra bất kỳ thiết kế trang web nào với một cái nhìn chuyên nghiệp. Ngừng trả tiền đắt cho những gì bạn có thể tự làm. [Miễn phí]

  • Chiều rộng: 250px
  • Chiều cao: 250px
  • Lề: 25 pixel ở trên cùng, 25 pixel ở dưới cùng, 25 pixel ở bên trái
  • Góc làm tròn: 50%
quầy vòng tròn hoạt hình trên cuộn

Thanh màu xoay

Phần tiếp theo của bộ đếm hình tròn sẽ là thanh màu xoay. Nhân đôi dấu phân cách trước đó (vòng tròn sau) để khởi chạy lại thiết kế. Sau đó, cập nhật dấu phân cách mới với nhãn "thanh màu".

quầy vòng tròn hoạt hình trên cuộn

Để tạo hiệu ứng thanh màu xoay, chúng ta cần biến tấm ngăn này thành hình bán nguyệt với màu sắc mà chúng ta muốn sử dụng cho thanh.

Mở cài đặt dải phân cách thanh màu và cập nhật các mục sau:

  • Màu nền: không có
  • Nền gradient màu bên trái: # 121b55
  • Màu nền của gradient bên phải: rgba (255,255,255,0)
  • Hướng dốc: 90deg
  • Vị trí bắt đầu: 50%
  • Vị trí cuối cùng: 0%
quầy vòng tròn hoạt hình trên cuộn

Trên một số trình duyệt, có một vấn đề nhỏ chồng chéo hiển thị màu không mong muốn qua các lớp. Để tránh điều này, chúng ta sẽ làm cho hình bán nguyệt này nhỏ hơn một chút và điều chỉnh độ lệch cho phù hợp.

  • Chiều rộng: 248px
  • Chiều cao: 248px
quầy vòng tròn hoạt hình trên cuộn

Để làm cho vòng tròn của thanh màu chồng lên vòng tròn phía sau, hãy đặt dải phân cách một vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 26 pixel
  • Độ lệch ngang: 26 pixel
quầy vòng tròn hoạt hình trên cuộn

Sau đó, thêm hiệu ứng cuộn sau để xoay thanh tròn 90 độ (hoặc 25% hình tròn).

Trong tab Hiệu ứng quay ...

  • Bắt đầu xoay vòng: 0deg (ở mức 15% của cửa sổ)
  • Xoay trung bình: 90 độ (ở 20% -25% khung nhìn)
  • Kết thúc xoay: 90 độ (ở 30% khung nhìn)
quầy vòng tròn hoạt hình trên cuộn

Các giá trị phần trăm và xoay vòng ở đây dường như không có ý nghĩa hoàn toàn vào thời điểm này. Chúng tôi giúp cập nhật vòng quay sau này dễ dàng hơn khi chúng tôi xây dựng bộ đếm vòng tròn tiếp theo kết thúc ở 180 độ (50% vòng tròn). Điều quan trọng tại thời điểm này là vòng quay kết thúc ở 90 độ (hoặc 25%).

Cái khiên

Phần tử tiếp theo của bộ đếm vòng tròn của chúng tôi là cái mà tôi gọi là lá chắn, là một hình bán nguyệt khác ẩn bên trái của vòng tròn thanh màu khi nó quay.

Bạn đang tìm kiếm các plugin và plugin WordPress tốt nhất?

Tải xuống các plugin và WordPress chủ đề tốt nhất trên Envato và dễ dàng tạo trang web của bạn. Đã tải xuống nhiều hơn 49.720.000. [ĐỘC QUYỀN]

 Để tạo lá chắn, hãy nhân đôi mô-đun phân tách Vòng tròn Quay lại đầu tiên mà chúng ta đã tạo trước đó. Sau đó kéo nó xuống dưới mô-đun phân tách "Thanh màu" và cập nhật nhãn thành "lá chắn" để dễ dàng tham khảo.

quầy vòng tròn hoạt hình trên cuộn

Mở cài đặt bộ chia lá chắn và cập nhật các thông tin sau:

  • Màu nền: không có
  • Màu nền gradient bên trái: # c3e0e5 (giống như vòng tròn phía sau)
  • Màu nền của gradient bên phải: rgba (255,255,255,0)
  • Hướng dốc: 90deg
  • Vị trí bắt đầu: 50%
  • Vị trí cuối cùng: 0%
quầy vòng tròn hoạt hình trên cuộn

Bây giờ cung cấp cho các mô-đun một vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 25px
  • Độ lệch ngang: 25 pixel
quầy vòng tròn hoạt hình trên cuộn

Vòng tròn phía trước

Phần tiếp theo của bộ đếm vòng tròn là vòng tròn phía trước, nó sẽ ẩn phần giữa của các lớp trước đó và để lộ cạnh bên ngoài.

Để tạo nó, hãy nhân đôi dải phân cách hình tròn phía sau, thả nó xuống dưới mô-đun dải phân cách hình khiên và cập nhật nhãn thành "vòng tròn phía trước".

quầy vòng tròn hoạt hình trên cuộn

Mở cài đặt của mô-đun tách vòng tròn phía trước và cập nhật các thông tin sau:

  • Màu nền: #ffffff
  • Chiều rộng: 200px
  • Chiều cao: 200px
quầy vòng tròn hoạt hình trên cuộn

Sau đó thêm vị trí tuyệt đối như sau:

  • Vị trí: tuyệt đối
  • Độ lệch dọc: 50px
  • Độ lệch ngang: 50px
quầy vòng tròn hoạt hình trên cuộn

Số lượng đổi màu

Phần cuối cùng của bộ đếm vòng tròn đầu tiên này là số lượng đổi màu tương ứng với giá trị được chỉ định bởi thanh quay.

Để xây dựng nó, thêm một mô-đun văn bản mới dưới mô-đun tách vòng tròn phía trước.

quầy vòng tròn hoạt hình trên cuộn

Trong hộp Lớp, đặt tên cho mô-đun văn bản mới là "num1". Sau đó, mở cài đặt và cập nhật nội dung để đọc "25%".

quầy vòng tròn hoạt hình trên cuộn

Trong cài đặt thiết kế, cập nhật các thông tin sau:

  • Trọng lượng phông chữ của văn bản: đậm
  • Kích thước văn bản: 25px
  • Chiều cao của dòng văn bản: 2em
  • Sắp xếp văn bản: trung tâm
quầy vòng tròn hoạt hình trên cuộn
  • Chiều rộng: 200px
  • Chiều cao: 200px
  • Góc làm tròn: 50%
quầy vòng tròn hoạt hình trên cuộn
  • Đệm: trên 75px
  • Vị trí: tuyệt đối
  • Độ lệch dọc: 50px
  • Độ lệch ngang: 50px
quầy vòng tròn hoạt hình trên cuộn

Bây giờ văn bản nên được tập trung hoàn hảo trong bộ đếm vòng tròn.

Dễ dàng tạo Cửa hàng trực tuyến của bạn

Tải xuống miễn phí WooCommerce, các plugin thương mại điện tử tốt nhất để bán các sản phẩm vật lý và kỹ thuật số của bạn trên WordPress. [Đề xuất]

Để thêm hiệu ứng mờ dần, hãy cập nhật các hiệu ứng cuộn sau:

Trong tab Làm mờ dần và Làm mờ dần ...

  • Kích hoạt mờ dần trong và ngoài: CÓ
  • Độ mờ ban đầu: 0% (ở mức 10% của cửa sổ)
  • Độ mờ trung bình: 100% (ở mức 20% của cửa sổ)
  • Độ mờ cuối: 100% (ở 100% chế độ xem)
quầy vòng tròn hoạt hình trên cuộn

Đó là nó cho đồng hồ tròn. Khám phá kết quả.

quầy vòng tròn hoạt hình trên cuộn

Tất cả những gì bạn cần làm bây giờ là sao chép những gì chúng ta đã làm cho đến nay trên các cột khác và sửa đổi các giá trị khác nhau để làm cho bộ đếm trở thành duy nhất.

Bài viết này chứa comments 0

Để lại một bình luận

Địa chỉ email của bạn sẽ không được công bố. Các trường bắt buộc được đánh dấu *

Trang web này sử dụng Akismet để giảm bớt không mong muốn. Tìm hiểu thêm về cách sử dụng dữ liệu nhận xét của bạn.

Trở lại đầu trang
1 cổ phiếu
cổ phiếu1
tweet
Enregistrer