Tạo các widget hoạt hình đầy đủ với Shift.css

Hoạt hình web cung cấp một cách để thu hút sự chú ý của mọi người và vẽ chúng thêm vào một trang web. Có rất nhiều công cụ hiện có tạo hình ảnh động miễn phí nhưng Shift.css là một trong những người mới nhất trong nhóm.

nó là một khung nguồn mở miễn phí được tạo ra để tạo ra hình ảnh động trong bất kỳ container. Và những hình ảnh động này không bị khóa thành một chuỗi. Bạn thực sự có thể xây dựng hình ảnh động tùy chỉnh cho từng yếu tố trong khối và áp dụng những theo một thứ tự nhất định.

Các Thay đổi trang demo có thể cho bạn thấy tốt hơn nhiều so với tôi có thể giải thích bằng lời.

Một điều bạn sẽ nhận thấy là mỗi yếu tố bên trong container là một phần tử HTML riêng biệt. Cho dù đó là một SVG hay một hình ảnh hay bất cứ điều gì, bạn có thể làm động mọi thứ riêng biệt để tạo hiệu ứng hoạt hình tùy chỉnh của riêng bạn.

Thư viện đi kèm với hai tập tin, một .css và .js thư viện, và cả hai cần phải được thêm vào đầu tài liệu của bạn.

Tôi không thể tìm thấy bất kỳ repo GitHub nào cho dự án này, vì vậy bạn sẽ cần tải tập tin trực tiếp từ trang web Shift.css.

Bước tiếp theo là định nghĩa một phần tử container với một số nội dung. Tên lớp rất quan trọng vì vậy mọi yếu tố hoạt hình cần phải có lớp .yếu tố thay đổi áp dụng.

Cùng với các lớp này, bạn cũng có thể thêm thuộc tính dữ liệu HTML5 để xác định cách hoạt hình. Ngay bây giờ chỉ có ba nhưng chúng đủ để tùy chỉnh hiệu ứng hoạt hình đầy đủ.

1. hoạt hình dữ liệu: Tên của hình ảnh động
2. trì hoãn dữ liệu: Tổng độ trễ (tính bằng giây) trước khi hoạt ảnh bắt đầu
3. thời lượng dữ liệu: Tổng chiều dài (tính bằng giây) của hình ảnh động

Tên hoạt hình cần phải là một hoạt hình được xác định trước được tạo cho thư viện Shift. Ngay bây giờ có 15 tên hoạt hình để lựa chọn. Bạn có thể thấy chúng được liệt kê ở cuối trang chủ Shift.css.

Chỉ sao chép dán bất cứ điều gì bạn muốn vào cài đặt tên hoạt hình và bạn nên đi thật tốt Ví dụ: nếu tôi muốn sử dụng hình ảnh động mờ dần tôi sẽ thêm data-animation = "shift_exitFade" như một thuộc tính dữ liệu cho bất kỳ yếu tố nào nên hoạt hình theo cách đó. Dễ như ăn bánh.

Tôi ước rằng thư viện này có nhiều tùy chọn hơn trong JavaScript vì nó sẽ cho phép các nhà phát triển kiểm soát nhiều hơn đối với vị trí và các tính năng. Nhưng đối với một khung hoạt hình đơn giản (và miễn phí), tôi không thể phàn nàn.

Shift.css là hoàn hảo cho nhà phát triển mới hơn ai muốn tạo phong cách hoạt hình phức tạp hơn không cần viết mã dài dòng từ đầu.