Bài này VICWEB sẽ chia sẻ đến bạn cách sử dụng Lottie chi tiết cho Flatsome ở version 3.17.

Lottie là một công nghệ mới cho phép hiển thị các animation trên web với độ trễ thấp và kích thước file nhỏ. Nếu bạn muốn tăng tính tương tác và thu hút người dùng, thì Lottie là công cụ lý tưởng cho bạn. Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về Lottie và cách sử dụng nó trên website.

Lottie là gì?

Lottie là một thư viện mã nguồn mở được phát triển bởi Airbnb, cho phép hiển thị các animation dạng vector trên web, Android và iOS. Các animation này được tạo ra bằng cách sử dụng Adobe After Effects hoặc các công cụ tương tự và được lưu dưới định dạng JSON.

Các ưu điểm của Lottie

Độ trễ thấp: Lottie sử dụng công nghệ vector để hiển thị animation, do đó, độ trễ khi tải trang web là rất thấp.
Kích thước file nhỏ: Các file JSON của Lottie rất nhỏ, vì vậy không ảnh hưởng đến tốc độ tải trang web.
Tương thích với nhiều nền tảng: Lottie được hỗ trợ trên nhiều nền tảng khác nhau, bao gồm web, Android và iOS.
Dễ dàng sử dụng: Lottie cung cấp các tính năng giống như CSS để điều khiển animation, vì vậy bạn có thể dễ dàng tùy chỉnh chúng.

Lottie là một công nghệ mới cho phép hiển thị các animation trên web với độ trễ thấp và kích thước file nhỏ. Bạn có thể sử dụng Lottie để tăng tính tương tác và thu hút người dùng trên trang web của mình.

Flatsome 3.17 trở đi hỗ trợ Lottie và cách sử dụng chi tiết như nào?

Đối với những người dùng Flatsome, việc sử dụng Lottie trên trang web của họ trở nên dễ dàng hơn bao giờ hết nhờ vào element Lottie được tích hợp sẵn trong theme. Trong bài viết này, chúng ta sẽ hướng dẫn cách sử dụng element Lottie trên Flatsome một cách chi tiết.

Bạn có thể xem chi tiết video trên để thao tác sử dụng Lottie trên website sử dụng theme Flatsome từ phiên bản 3.17 trở đi.

Chi tiết các options settings của element Lottie

Loop: Vòng lặp cho hiệu ứng Animation Lottie
Autoplay: Ưu tiên bật. Nếu tắt -> bạn sẽ có các tuỳ chỉnh tại Trigger: Click để chạy, Scroll(Cuộn đến sẽ chạy), Hover để chạy…
Reverse: Bật tuỳ chọn này, hiệu ứng sẽ chạy ngược lại từ 100% về 0%.
Frame start: mặc định 0%, có nghĩa animation sẽ bắt đầu chạy từ 0%.
Frame end: mặc định 100%, có nghĩa animation sẽ chạy đến 100%.
Control: Bật tuỳ chọn này, sẽ hiện nút pause, stop animation.

4.8/5 - (10 bình chọn)

Hướng dẫn sử dụng Lottie chi tiết cho Flatsome

Lottie là gì?

Các ưu điểm của Lottie

Flatsome 3.17 trở đi hỗ trợ Lottie và cách sử dụng chi tiết như nào?

Bài viết liên quan