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

filiallion · 07/10/2018

Magic Animations là một bộ thư viện với các hiệu ứng chuyển động được thiết kế bằng CSS3. Một điều thú vị là Magic Animations được tạo ra bởi Daniel Eden's vốn làm việc trên thư viện Animate.css mà tôi đã từng giới thiệu với các bạn ở bài viết "Tạo hiệu ứng đẹp mắt với thư viện Animate.css". Thư viện Magic Animations cũng cung cấp các hiệu ứng chuyển động như Animate.css, vì vậy nếu các bạn kết hợp 2 bộ thư viện này thì các bạn sẽ có một khối lượng lớn các hiệu ứng chuyển động đủ để thiết kế bất kỳ hiệu ứng chuyển động nào cho website của các bạn.

Việc sử dụng thư viện Magic Animations yêu cầu các bạn phải thực hiện gọi hiệu ứng bằng jQuery nên các bạn cần phải tích hợp thư viện jQuery vào website. Các bạn có thể tải thư viện jQuery tại địa chỉ https://jquery.com/download và tải thư viện Magic Animations tại địa chỉ https://github.com/miniMAC/magic.

Các bạn tích hợp thư viện Magic Animations vào website với dòng mã lệnh như sau:

HTML:

<link href="path/to/magic.min.css" rel="stylesheet">

Và gọi hiệu ứng chuyển động bằng jQuery như ví dụ sau:

JavaScript:

$(function() {
    $('.magic-animations').hover(function() {
        $(this).addClass('magictime puffIn');
    });
});

Áp dụng cài đặt hiệu ứng trên với dòng mã lệnh như sau:

HTML:

<h1 class="magic-animations">Gextend</h1>

Các bạn có thể xem thêm các hiệu ứng chuyển động của thư viện Magic Animations tại địa chỉ https://www.minimamente.com/example/magic_animations và tìm hiểu thêm về thư viện Magic Animations tại địa chỉ https://github.com/miniMAC/magic.

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

filiallion

Administrator