Share Tạo hiệu ứng chuyển động với thư viện Morf.js

filiallion · 07/09/2018

Thư viện Morf.js giúp các bạn tạo ra các hiệu ứng chuyển động đẹp trên website chỉ với vài dòng lệnh JavaScript đơn giản. Việc sử dụng thư viện Morf.js thật sự đơn giản, các bạn tích hợp thư viện Morf.js vào website là có thể sử dụng thư viện để tạo ra các hiệu ứng chuyển động cho website của các bạn. Một điều cho thấy sự đơn giản khi sử dụng thư viện Morf.js là thư viện này chạy độc lập không cần tới thư viện jQuery.

Các bạn có thể tải thư viện Morf.js tại địa chỉ http://www.joelambert.co.uk/morf.

Việc tích hợp thư viện Morf.js vào website cũng đơn giản chỉ với dòng mã lệnh như sau:

HTML:

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

Và các bạn tạo hiệu ứng chuyển động như ví dụ sau:

JavaScript:

var element = document.getElementById('element');

var transition = Morf.transition(element, {
    'transform': 'translate3d(300px, 0, 0) rotate(90deg)'
}, {
    duration: '1500ms',
    timingFunction: 'bounce'
});

Các bạn có thể tìm hiểu thêm về thư viện Morf.js tại địa chỉ https://github.com/joelambert/morf.

Share Tạo hiệu ứng chuyển động với thư viện Morf.js

filiallion

Administrator