Share Tạo hiệu ứng hoạt hình khi cuộn trang web với thư viện Motus

[filiallion]

Language

Tiếng Việt

Các hiệu ứng hoạt hình thường sử dụng CSS để tạo, tuy nhiên có những hiệu ứng chỉ một mình CSS thì không thể, lúc này JavaScript sẽ được sử dụng để tạo ra các hiệu ứng hoạt hình phức tạp. Thư viện Motus cũng là một trong số đó, nó có chức năng tạo các hiệu ứng hoạt hình cho nội dung khi người dùng cuộn trang web lên xuống. Thư viện Motus được phát triển bởi lập trình viên nhiều kinh nghiệm Alexandru Cambose, hiện tại thư viện Motus vẫn đang được hỗ trợ rất nhiệt tình từ Alexandru Cambose nên nếu trong quá trình sử dụng các bạn gặp khó khăn thì có thể liên hệ để được hỗ trợ.

Thư viện Motus được phát triển cho cả Nodejs nên các bạn đang là lập trình viên Nodejs có thể sử dụng để tạo hiệu ứng hoạt hình cho ứng dụng web của mình.

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

<script src="path/to/motus.web.js"></script>

Bây giờ, các bạn tạo một trang nội dung đủ dài để làm xuất hiện thanh cuộn. Trong nội dung, các bạn muốn tạo hiệu ứng hoạt hình cho thành phần nào đó thì các bạn khai báo như sau:

<div id="motus">Welcome to Gextend</div>

Cài đặt thư viện Motus với nội dung mã lệnh JavaScript sau:

//Khai báo hiệu ứng
var animation = new Motus.Animation({
    $el: document.getElementById('motus'),
    keyframes: [{
        width: 100
    }, {
        width: 300
    }]
});

//Thêm hiệu ứng
Motus.addAnimation(animation);