CSS Hero Animator: Tạo hiệu ứng chuyển động cho website

Nếu bạn là một chuyên gia về CSS, bạn có thể tự code các hiệu ứng này. Nhưng đối với phần đông chúng ta, WordPress không cung cấp cách nào dễ dàng để thêm các hiệu ứng animation vào nội dung trang web của chúng ta.

CSS hero Animator là một plugin mới độc lập từ đội ngũ CSS Hero, giúp thay đổi điều đó, mang đến cho bạn một giao diện đơn giản với chức năng chỉ kéo và nhấp để thiết lập tất cả các loại animation trên trang WordPress của bạn, dù bạn đang sử dụng trình chỉnh sửa gốc hay một plugin xây dựng trang.

Nếu bạn không phải là người am hiểu kỹ thuật, plugin này vẫn cho phép bạn thiết lập các animation trên trang web của mình. Và ngay cả khi bạn có khả năng viết CSS riêng, Animator vẫn có thể giúp bạn tiết kiệm thời gian với giao diện của nó.

Chỉ Cần vài click chuột là bạn có thể tạo các Animation cho web

Animator đơn giản hóa quy trình tạo animation bằng cách cung cấp ba chế độ khác nhau để bạn có thể animate bất kỳ yếu tố nào trên trang web WordPress của mình:

Đánh Giá Animator: Plugin Này Cung Cấp Những Gì?

Lợi ích nổi bật của Animator là nó cho phép bạn thêm rất nhiều loại hiệu ứng animation khác nhau vào trang web của mình mà không cần bất kỳ kiến thức sâu về CSS, JS hay các kỹ năng kỹ thuật khác.

Thay vào đó, bạn có thể làm mọi thứ từ một giao diện chỉ và nhấp, hoàn chỉnh với một dòng thời gian animation giúp bạn kiểm soát các hiệu ứng của mình.

3+ Chế Độ Animation Cấp Cao Với Nhiều Thuộc Tính Animation

Để giúp bạn thiết lập các animation, Animator cung cấp ba chế độ cấp cao:

1. Parallax – “tween” các animation dựa trên vị trí phần trăm của yếu tố trong khung nhìn (viewport). Tween là viết tắt của inbetween – ý tưởng cơ bản ở đây là nó cho phép bạn tạo hiệu ứng cuộn parallax.
2. Scroll – kích hoạt các kiểu CSS hoặc các animation cụ thể sau khi người dùng đã cuộn một số pixel nhất định. Ví dụ, bạn có thể áp dụng các kiểu trạng thái cụ thể cho tiêu đề khi người dùng cuộn xuống trang.
3. Timed – tạo các animation dựa trên thời gian diễn ra theo lịch trình. Ví dụ, thêm một hiệu ứng float vào một yếu tố để làm nó nổi bật.

Ngoài các chế độ animation cấp cao, bạn cũng có khả năng animate một loạt các thuộc tính CSS, bao gồm:

• Màu nền
• Vị trí nền
• Box shadow
• Kích thước font
• Khoảng cách giữa các chữ
• Độ mờ
• Phối cảnh
• Xoay X, Y hoặc Z
• Phóng to
• Nghiêng X hoặc Y
• Chiều rộng
• …và nhiều hơn nữa

Tương Thích Với Trình Chỉnh Sửa Gốc, Các Chủ Đề Và Plugin Page Builder

Ngoài việc hoạt động với trình chỉnh sửa gốc của WordPress, Animator cũng hoạt động với các chủ đề và plugin page builder của bên thứ ba.

Dưới đây là danh sách các theme và plugin cơ bản và phổ biến:

• Elementor
• Beaver Builder
• Divi
• WPBakery Page Builder
• Avada
• Astra
• Oxygen

Nói chung, Animator nên hoạt động trên bất kỳ yếu tố nào trên trang web của bạn, bất kể yếu tố đó đến từ đâu.

Chỉnh Sửa Thủ Công Hoặc Xuất Animation (Dành Cho Người Dùng Cao Cấp Hơn)

Trong khi Animator được xây dựng để người dùng không chuyên có thể tạo animation bằng giao diện chỉ và nhấp, người dùng cao cấp hơn có thể đánh giá cao việc Animator vẫn cung cấp cho bạn quyền truy cập vào mã gốc nếu bạn muốn chỉnh sửa trực tiếp.

Bạn cũng có thể xuất dữ liệu ứng dụng nếu cần.

Plugin Hoàn Toàn Độc Lập

Mặc dù Animator được phát triển bởi đội ngũ CSS Hero, bạn không cần phải cài đặt CSS Hero để sử dụng Animator. Bởi vậy Animator là một plugin chạy hoàn toàn độc lập.

Tuy nhiên, Animator vẫn hoạt động tốt với CSS Hero, vì vậy bạn hoàn toàn có thể sử dụng cả hai nếu bạn muốn kiểm soát giao diện trang web mà không cần biết một dòng code nào.