Hướng dẫn và sử dụng jquery plugin typing để giả hiệu ứng gõ văn bả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 

1. Dưới đây là demo
Chào mừng các bạn đã đến với blog sonpc20.com của mình
Hãy chờ mình một chút Khoảng tầm 2 giây thôi rồi thì mình giới thiệu nhé..2
Đây là Plugin giả lập Typing rất thú vị.
<del></del> để thực hiện giả lập xóa text *2
<ints>{numeric}</ints> để thực hiện delay một khoảng thời gian (tính bằng giây)*2
<kbd></kbd> để tối ưu việc gõ nhầm *2
Chúc mọi ngườicá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é 2
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

Nếu bạn thấy nội dung chia sẻ này có ích với bạn hãy Donate để tạo động lực cho tôi viết các bài viết tiếp theo nhé. Cảm ơn nhiều !!!!

Từ khóa: Jquery Plugins

Bài viết cùng chuyên mục

Hướng dẫn gửi email bằng code C#. Cấu hình tài khoản gmail để gửi email từ phần mềm.

Sử dụng thư viện SmtpClient để gửi email. Cấu hình tài khoản gmail ở trạng thái kém bảo mật để có thể gửi email từ phần mềm.

02/12/2020 Xem chi tiết
Các hướng đi cho lập trình viên khi lựa chọn ngôn ngữ lập trình.

Mình thì lựa chọn phát triển web nên đã chọn chuyên sâu về HTML, Css, Javascript, ASP.NET, SQL

23/11/2020 Xem chi tiết
Mật khẩu kém bảo mật được sử dụng phổ biến trong năm 2020

Bất ngờ với mật khẩu 123456 lại đứng top đầu danh sách. Cứ bảo sao tài khoản hay bị hack. Đúng là sai lầm và chủ quan.

20/11/2020 Xem chi tiết
Xây dựng khung phần mềm trên nền Web giao diện Desktop Window

Đã xây dựng gần như xong khung, chỉ việc viết module business để phát triển phần mềm trên nền tảng Web giao diện Window.

30/10/2020 Xem chi tiết
Tôi đã thiết kế ra design pattern Trứng có trước hay Gà có trước như thế nào

Về ý tưởng này tôi đã thực hiện khoảng 5,6 năm trước do tham gia vào dự án mà xây dựng các khối độc lập nhưng lại có tính năng tương tự nhau

19/10/2020 Xem chi tiết
Chia sẻ một số hiệu ứng Hover hữu ích khi làm Frontend viết bằng css

Gồm các hiệu ứng Hover ZoomIn, Hover Fade, Hover Blur, Hover Zoomout, Hover Mask, Hover Over Text, Hover Fall, Hover Blurout

16/10/2020 Xem chi tiết

Bài viết khác

Tại sao code của tôi thường ngắn gọn như vậy

Khi bắt tay vào thực hiện các yêu cầu tôi thường phân tích kỹ và code trừu tượng.

15/09/2020 Xem chi tiết
Hướng dẫn sử dụng bootstrap tourist để làm trợ giúp cho phần mềm

Làm trợ giúp, hướng dẫn cho khách hàng sử dụng website một cách đơn giản nhất. Tôi cũng đã ứng dụng cho phần mềm của mình.

12/09/2020 Xem chi tiết
Hướng dẫn sử dụng Jquery plugin Lazy Load everything

Đây là plugin tôi chỉnh sửa lại từ thư viện jquery.lazyload.js để từ đó có thể lazy với mọi phần tử và không chỉ riêng cho sử dụng lazy image.

10/09/2020 Xem chi tiết
Thư viện Linq.js trong javascript

Thư viện này cung cấp đầy đủ các phương thức như .NET 4.0 và mở rộng thêm nhiều phương thức khác

10/09/2020 Xem chi tiết
Hướng dẫn sử dụng Jquery Plugin Hotkeys - Tạo phím nóng trên trình duyệt web

Thư viện của tác giả Tzury Bar Yochay được viết từ năm 2010

06/09/2020 Xem chi tiết
Hướng dẫn sử dụng Timer trong Javascript

Định nghĩa đối tượng Timer tương tự như trong WinForm C# để thực hiện task vụ theo chu kỳ bằng Javascript

01/09/2020 Xem chi tiết
{"nalias":"huong-dan-va-su-dung-jquery-plugin-typing-de-gia-hieu-ung-go-van-ban","lang":"2","cattype":"0","catId":"3","UrlEngine":"UrlNewsEngine","site":"1"}