Share Tạo hiệu ứng hoạt hình với thư viện Choreographer-js

[filiallion]

Language

Tiếng Việt

Hiệu ứng hoạt hình trên website hiện nay được sử dụng khá phổ biến khi hầu hết các website đều thiết kế với các hiệu ứng chuyển động hoạt hình. Các hiệu ứng hoạt hình được thiết kế rất đa dạng, trong số đó là hiệu ứng khi cuộn trang hay rê chuột. Với thư viện Choreographer-js, các bạn có thể dễ dàng tạo hiệu ứng lên một đối tượng trên website khi cuộn trang hoặc rê chuột di chuyển.

Choreographer-js là một thư viện JavaScript nhỏ gọn chỉ với vài phương thức đơn giản được cung cấp để tạo hiệu ứng hoạt hình. Để sử dụng thư viện Choreographer-js, các bạn có thể tải tại địa chỉ https://github.com/christinecha/choreographer-js hoặc sử dụng dòng lệnh NPM như sau:

npm install choreographer-js --save

Các bạn tích hợp thư viện Choreographer-js vào website với dòng lệnh HTML như sau:

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

Bây giờ, các bạn cài đặt thư viện Choreographer-js với hiệu ứng hoạt hình đơn giản khi cuộn trang như ví dụ sau:

window.addEventListener('mousemove', (event) => {
    //Khai báo đối tượng choreographer
    var choreographer = new Choreographer({
        animations: [{
            selector: '#choreographer',
            range: [-1, window.innerWidth / 2],
            type: 'change',
            style: 'transform:translateY',
            to: 300,
            unit: 'px'
        }]
    });
    
    //Áp dụng hiệu ứng hoạt hình
    choreographer.runAnimationsAt(event.clientX);
});