LottieFiles là gì?

LottieFiles cung cấp các hoạt ảnh định dạng .json và .lottie được tối ưu hóa cho web. Bạn có thể dễ dàng nhúng vào website mà không cần kỹ năng lập trình phức tạp.

Tại bài viết trước mình có giới thiệu LottieFiles – Kho biểu tượng chuyển động miễn phí, bài viết này sẽ hướng dẫn chi tiết hơn cách chèn biểu tượng chuyển động siêu mượt vào trang web của bạn.

Chọn hình ảnh

Mình ví dụ tìm hoạt cảnh giáng sinh.

Sau khi chọn được ảnh, các bạn bấm vào nút Download.

Để chèn nhanh nhất mà không phải làm gì, bạn chọn Handoff, bật Enable asset CDN, bạn sẽ nhận được mã nhúng.

Mã nhúng có dạng:

<script src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs" type="module"></script>
<dotlottie-player src="https://lottie.host/82d9c162-3cbb-4f00-805a-ed2a0f19aad1/vpnNZbpGBR.lottie" background="transparent" speed="1" style="width: 300px; height: 300px" loop autoplay></dotlottie-player>

Bạn có thể tùy chỉnh lại CSS của hoạt cảnh tại thuộc tính style. Ví dụ mình chèn hoạt ảnh này vào góc trái màn hình phía trên cùng của bài viết này.

Lưu ý: Khi chèn hoạt cảnh thứ 2 trở đi, bạn không cần nhúng lại dòng <script src="https://unpkg....

Ưu điểm khi dùng LottieFiles

• Siêu nhẹ, không làm chậm trang
• Hỗ trợ responsive cho mọi thiết bị
• Tự động lặp, tuỳ chỉnh tốc độ
• Không cần plugin nếu bạn dùng code nhúng

Kết luận

LottieFiles là công cụ tuyệt vời để thêm sự sống động vào website mà không ảnh hưởng đến tốc độ tải trang. Phù hợp cho cả những người mới làm web hoặc nhà phát triển chuyên nghiệp.

Chúc các bạn thành công!