Tạo hiệu ứng xếp tầng dễ dàng với CascadeJS

Hoạt hình lạ mắt là một tá trên web. Chúng trở nên dễ dàng hơn để tạo ra với hàng tấn đáng kinh ngạc thư viện hoạt hình.

Cascade.js là một thư viện nữa để thêm vào danh sách, và nó chắc chắn là một thư viện duy nhất. Với Cascade, bạn có thể thiết kế các hiệu ứng hoạt hình tùy chỉnh bằng cách sử dụng xếp tầng trong văn bản hoặc yếu tố xếp tầng trong một thùng chứa chính.

Thư viện này có không phụ thuộc; nó chạy trên JavaScript cổ điển. Bạn có thể cài đặt nó qua npm, Bower hoặc bằng cách tải xuống một bản sao ngay từ GitHub.

Để CascadeJS hoạt động, bạn sẽ cần hai tập tin: tệp CSS và tệp JavaScript. Cả hai đều được đóng gói với phiên bản rút gọn để giúp bạn tiết kiệm một vài KB trên kích thước trang.

Mỗi phần tử Cascade được chia thành các phần riêng biệt animate cá nhân xuyên qua các yếu tố. đó là thêm động, vì vậy bạn không cần thay đổi bất cứ điều gì trong HTML của mình.

Nhưng, bạn sẽ cần phải thiết lập lưu lượng() chức năng trong tệp của bạn, sau khi nhắm mục tiêu bất kỳ yếu tố nào bạn muốn làm động.

Bạn thực sự có thể sử dụng jQuery với thư viện này nếu bạn muốn, tuy nhiên nó không yêu cầu. Vì vậy, nếu bạn thích chọn các phần tử với jQuery thì hãy sử dụng nó để thay thế.

Đây là một đoạn trích của vani JavaScript từ bản demo của trang web chính:

Bạn có thể vượt qua lưu lượng() yếu tố với không có tham số, hoặc bạn có thể cấu hình tất cả bản thân bạn. Nó cần tám tham số tùy chọn để chỉnh sửa kiểu hoạt hình, thời gian, thời lượng và các lớp CSS tùy chọn.

CascadeJS có một chức năng khác gọi là miếng() cho phép bạn tách các chữ cái (hoặc các yếu tố) vào các thùng chứa riêng biệt, mà không cần hoạt hình chúng. Bạn có thể sử dụng chức năng này để màu sắc và văn bản restyle trên trang bằng cách nhắm mục tiêu mỗi chữ cái riêng lẻ trong một từ. Khá tuyệt, đúng không?

Tất cả các mẫu mã có sẵn công khai trên trang thư viện chính, vì vậy bạn có thể tự sao chép / dán và sửa lại. Nhưng, bạn cũng sẽ tìm thấy tài liệu trên trang GitHub nếu bạn đang tìm kiếm một cách rõ ràng hơn để bắt đầu.