Hướng dẫn và sử dụng jquery plugin typing để giả hiệu ứng gõ văn bản

Bài viết được sự cho phép của tác giả Phạm Công Sơn

Đây là plugin giả lập gõ văn bản, rất phù hợp với những web cần hiển thị text dạng ngắn hay slogan hiện ra từ từ bằng hiệu ứng typing. Các bạn có thể tải plugin này tại đây

  15 thư viện slider jquery miễn phí cho dự án website của bạn
  Cách sử dụng các plugins jQuery trong VueJS

1. Dưới đây là demo

Chào mừng các bạn đã đến với blog sonpc20.com của mình ​

2. Hướng dẫn cài đặt

<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="t.min.js"></script>

3. Hướng dẫn sử dụng

Nội dung code Html
<div data-form="typing" class="hide">     <mark><a>Chào mừng các bạn đã đến với blog son20.com của mình</a></mark>     <br/>Hãy chờ mình một chút <del>Khoảng</del> tầm 2 giây thôi rồi thì mình giới thiệu nhé..<ins>2</ins>     <br /><strong>Đây là Plugin giả lập Typing rất thú vị.</strong>     <br /><del></del> để thực hiện giả lập xóa text *<ins>2</ins>     <br /><ints>{numeric}</ints> để thực hiện delay một khoảng thời gian (tính bằng giây)*<ins>2</ins>     <br /><kbd></kbd> để tối ưu việc gõ nhầm *<ins>2</ins>     <br/>Chúc <del style="color:red;border-bottom:1px dashed red;">mọi người</del>các bạn sử dụng plugin này vào những trường hợp hữu ích.     Chờ xíu để chạy lại nhé <ints>2</ints> </div>
Nội dung code javascript
var run = function () {     $("[data-form=typing]").removeClass("hide").t({         speed: 50,                             pause_on_tab_switch: true,         pause_on_click: true,         beep: true,         fin: function () { run(); }     }); } run();
Tham số Giá trị Ghi chú
speed numeric Tốc độ giả lập gõ văn bản, càng lớn thì giả lập tốc độ gõ càng chậm
pause_on_tab_switch boolean Nếu là true thì sẽ dừng giả lập gõ khi trình duyệt mất focus
pause_on_click boolean Nếu là true thì sẽ dừng giả lập gõ khi click vào hiển thị
beep boolean Nếu là true thì sẽ có âm thanh gõ khi giả lập typing
fin function sự kiện khi kết thúc giả lập

Chúc các bạn sử dụng plugin vào những lúc thích hợp

Sơn 20

Bài viết gốc được đăng tải tại sonpc20.com

Có thể bạn quan tâm:

Xem thêm Tuyển dụng JQuery hấp dẫn trên TopDev