Share Tạo hiệu ứng màu nền đẹp mắt với thư viện Granim.js

[filiallion]

Language

Tiếng Việt

Việc sử dụng ảnh nền hay màu nền để trang trí giao diện website là rất phổ biến nhưng các bạn có bao giờ tạo hiệu ứng chuyển sắc cho màu nền chưa? Nếu sử dụng CSS để tạo hiệu ứng chuyển sắc cho màu nền thì thật sự rất khó khăn để viết các mã lệnh, vì vậy bài viết này tôi sẽ giới thiệu với các bạn một thư viện JavaScript dùng để tạo hiệu ứng chuyển sắc cho màu nền là Granim.js.

Với thư viện Granim.js, các bạn có thể dễ dàng tạo ra hiệu ứng chuyển sắc màu nền với nhiều màu sắc khác nhau, tuỳ vào sự kết hợp của các bạn mà các bạn sẽ nhận được những hiệu ứng màu sắc đẹp mắt.

Các bạn tải thư viện Granim.js tại địa chỉ https://github.com/sarcadass/granim.js và tích hợp vào website với dòng mã lệnh sau:

<script src="path/to/granim.min.js"></script>

Các bạn tạo một thành phần HTML để tạo hiệu ứng màu nền như sau:

<div id="granim"></div>

Bây giờ, các bạn cài đặt thư viện Granim.js như sau:

var granim = new Granim({
    element: '#granim',
    direction: 'left-right',
    isPausedWhenNotInView: true,
    states: {
        'default-state': {
            gradients: [
                ['#ff9966', '#ff5e62'],
                ['#00F260', '#0575E6'],
                ['#e1eec3', '#f05053']
            ]
        }
    }
});

Các bạn có thể tham khảo thêm các ví dụ của thư viện Granim.js tại địa chỉ https://sarcadass.github.io/granim.js/examples.html.