Viết chữ kiểu đánh máy trên blogspot

Dưới đây là hiệu ứng nhả từng chữ lên màn hình, giống như kiểu người ta đang đánh máy với thời gian thực.

Code này sử dụng javascript kết hợp với thư viện jquery nhưng không phải toàn bộ các trang của blogspot đều áp dụng thủ thuật này nên bạn chỉ áp dụng vào bài viết hay một tiện ích nào đó mà bạn muốn.

Để thực hiện thủ thuật viết chữ kiểu đánh máy cho blogspot thì không có gì quá phức tạp,bạn chỉ cần sử dụng code tôi sẽ trình bấy dưới đây là được.
Viết chữ kiểu đánh máy trên blogspot

Hãy xem thử nhé:

CƠM và PHỞ

Cơm khoe: "Tớ nhất trên đời".
Phở rằng: "Tớ cũng tuyệt vời đấy nha"
Cơm là từ gạo mà ra
Phở cũng từ gạo nhưng mà… ngon hơn.
Cơm nhờ hương gạo mà thơm
Phở nhiều nguyên liệu nên thơm đủ mùi.
Cơm ăn no bụng là thôi
Phở vừa no, lại muốn đòi ăn thêm.
Cơm ăn hàng bữa nên quen
Phở thì thỉnh thoảng nên thèm, đương nhiên.
Cơm ngon, chẳng lo mất tiền
Phở thiu, cũng phải bỏ tiền mà mua.
Cơm chân chất, chẳng đẩy đưa
Phở trang trí đẹp, dễ lừa mắt ai.
Cơm ngoan chẳng sợ tiếng tai
Phở tuy đẹp đẽ nhưng đầy hoài nghi.
Cơm quen chẳng ngại ngần gì
Phở ăn dăm bữa tức thì ngán thôi.
Phụ cơm, chớ phụ người ơi.
Cho dù thua phở, nhưng thời… an tâm.

Áp dụng vào blogspot
Bạn sử dụng code bên dưới ngay tại bài viết bên soạn thảo văn bản HTML hay tại tiện ích HTML/javascript ở nơi bạn muốn.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.typewrite{ font-size: 20px;}
.typing-cursor{ position: relative; display: inline-block; width: 8px; text-indent: -999em; background: #ccc;}
</style>
<script>
$(document).ready(function(){
//get the content
var content = $('.typewrite').html();
//find the length of the content
var contentLength = content.length;
var char = 0;
$('.typewrite').html('<span class="typing-cursor">|</span>');
//Here is the function
(function typeFunc() {  
 //dynamic delay to get the typewriting feel
    var typingSpeed = Math.round(Math.random() * 120) + 60;
    setTimeout(function() {
        char++;
        var type = content.substring(0, char);
  $('.typewrite').html(type + '<span class="typing-cursor">|</span>');
  //recursive
        typeFunc();
    }, typingSpeed);
}());
});
</script>
<div class="typewrite">
  Nội dung bạn cần viết<br/>
  Nội dung bạn cần viết<br/>
</div>
Chúc các bạn thành công!
Publis: 

1 comment

  1. Hay quá, rất thú vị.
🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji