Share Tạo hiệu ứng xoay chữ với thư viện Simple Text Rotator

filiallion · 07/02/2018

Để tạo hiệu ứng xoay chữ đẹp mắt các bạn có thể sử dụng CSS3, nhưng để tạo được hiệu ứng đó đòi hỏi các bạn phải có kinh nghiệm tốt về CSS3 thì mới có thể tạo ra các hiệu ứng như ý muốn. Với thư viện Simple Text Rotator các bạn có thể tạo ra các hiệu ứng xoay chữ mà các bạn muốn chỉ bằng cách tích hợp thư viện vào website và sử dụng.

Simple Text Rotator được viết trên nền tảng jQuery nên việc sử dụng thư viện này yêu cầu phải tích hợp jQuery vào website trước khi sử dụng. Các bạn tải thư viện jQuery tại địa chỉ https://jquery.com/download.

Các bạn tải thư viện Simple Text Rotator tại địa chỉ https://github.com/peachananr/simple-text-rotator và có thể xem trước các ví dụ tại địa chỉ http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html.

Các bạn tích hợp thư viện Simple Text Rotator vào website với nội dung mã lệnh như sau:

HTML:

<link href="path/to/simpletextrotator.css" rel="stylesheet">
<script src="path/to/jquery.simple-text-rotator.min.js"></script>

Và cài đặt thư viện Simple Text Rotator với hiệu ứng xoay chữ như nội dung mã lệnh sau:

JavaScript:

$(function() {
    $('.textrotator').textrotator({
        animation: 'dissolve',
        separator: ',',
        speed: 3000
    });
});

Sau đó để áp dụng với nội dung nào các bạn tham khảo nội dung mã lệnh như sau:

HTML:

<div class="textrotator">Welcome to, Gextend</div>

Share Tạo hiệu ứng xoay chữ với thư viện Simple Text Rotator

filiallion

Administrator