Tạo chuyển tiếp Gradient đẹp mắt với Granim.js
Thiết kế web đầy vẻ đẹp và thiết kế giao diện đẹp. Một số tính năng là chức năng trong khi những tính năng khác chỉ để hiển thị. Chuyển đổi độ dốc là chỉ dành cho chương trình nhưng họ đóng gói một cú đấm!
Với Granim.js, bạn có thể xây dựng chuyển đổi gradient đầy đủ màu sắc tùy chỉnh trông mượt mà và kết nối độc đáo với bất kỳ trang web nào.
Bạn có thể tìm một loạt các ví dụ tùy chỉnh trên trang ví dụ chính với nhiều kiểu khác nhau từ chuyển tiếp đơn giản đến hoạt ảnh phức tạp hơn bằng hình nền.
Granim là thư viện JS duy nhất tôi biết giải quyết chuyển đổi độ dốc. Đây là một câu hỏi tôi luôn tự hỏi và không bao giờ thực sự tìm thấy một câu trả lời tuyệt vời. Granim là giải pháp hoàn hảo và nó được xây dựng trên JavaScript vanilla, để nó có thể chạy cùng với jQuery hoặc bất kỳ thư viện JS nào khác.
Chỉ thả granim.js nộp vào trang của bạn để bắt đầu. Bạn có thể tải xuống một bản sao từ GitHub hoặc lưu trữ một bản từ CDN trực tiếp.
Đây là một mẫu mã cơ bản từ repo GitHub:
Mọi thứ có thể trở nên phức tạp hơn nhiều so với điều này vì vậy bạn thực sự nên đào sâu vào các ví dụ để tìm hiểu thêm. Bạn sẽ tìm thấy đoạn mã dưới mỗi ví dụ để bạn có thể tạo chuyển tiếp độ dốc cho hình nền và thậm chí mặt nạ hình ảnh.
Mặt nạ hình ảnh có thể được sử dụng cho logo, ví dụ hình ảnh PNG, được ẩn đằng sau một gradient. Điều này cho phép bạn tạo logo hoạt hình JS nơi gradient chuyển từ từ trong suốt văn bản.
Lưu ý ví dụ này mất rất nhiều mã JS / CSS vì vậy nó không phải là một thực hiện đơn giản.
Nhưng bạn càng thực hành với Granim, bạn càng dễ dàng thiết lập và tùy chỉnh. Và với việc đây là thư viện chuyển đổi độ dốc thực sự duy nhất trực tuyến, đây là giải pháp tốt nhất tuyệt đối cho mọi dự án.
Thư viện vẫn được cập nhật bán thường xuyên để bạn có thể kiểm tra tab sự cố để biết thêm thông tin.
nó là một thư viện nhỏ Vì vậy, không có quá nhiều thứ để sai hoặc cần cập nhật. Đây là những gì làm cho Granim.js trở thành một giải pháp đáng tin cậy cho bất kỳ trang web nào dù lớn hay nhỏ.
Đến tải về một bản sao truy cập trang phát hành trên GitHub hoặc lấy một bản sao của .js tập tin trực tiếp từ cdnjs. Và để xem nguồn trên một ví dụ trực tiếp hãy xem qua bản demo CodePen này được tạo bởi Jonathan Schneider.
