[share]Tạo hiệu ứng đánh chữ với Typed.js

Lượt xem: 282
FaceBook Google+ Twitter

Đây là Plugin được viết bởi Matt Boldt.
Typed.js sử dụng JQuery nên các bạn phải nhập thư viện JQuery trước mới sử dụng được nha.

Một vài cách dùng, sau khi nhập typed.js
• Hiệu ứng nhấp nháy bằng css
''.highlight('.typed-cursor{
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}').''• Các bạn code js sau
''.highlight('$(function(){
$(".element").typed({
strings: ["Dòng chữ đầu.", "Dòng thứ hai."],
typeSpeed: 0
});
});').''
Trong đó .element là vùng chọn có class element sẽ được áp dụng typed.js và typed({ .... }) sẽ chứa các tùy chọn (options) của các bạn.

• Các tùy chọn mình liệt kê ra đây:
strings: Chứa các đoạn văn bản mà bạn muốn ghi ra lần lượt. Đặt trong cặp dấu [ ... ], mỗi đoạn chứa cặp dấu nháy và ngăn cách nhau bởi dấu phẩy.
VD:
strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"]
stringsElement: Tương tự như trên nhưng thay đoạn text bạn viết thì nó sẽ lấy nội dung trong 1 element khác
typeSpeed tốc độ đánh phím
startDelay thời gian chờ để bắt đầu đánh phím, mặc định là 0 để vừa chạy là đánh luôn.
backSpeed tốc độ xóa lùi bằng backspace, khi viết xong 1 đoạn text nó sẽ xóa và viết đoạn tiếp theo.
shuffle trộn các text không theo trình tự. True hoặc false mặc định false.
backDelay Thời gian chờ để xóa text. Sau khi viết xong đoạn text, nó sẽ chờ một khoảng để xóa và viết đoạn tiếp theo.
loop lặp lại đoạn text. True hoặc false
loopCount số lần lặp. false là lặp vĩnh viễn, chỉ có tác dụng khi cái trên thiết lập True.
showCursor hiện con trỏ chuột. True hoặc false.
cursorChar kí tự con trỏ chuột. Mặc định là "|"
attr thuộc tính loại, mặc định null là text
contentType loại nội dung cho phép. Giá trị là html hoặc text.
• Ngoài ra còn có một số hàm gọi về:
callback gọi về khi thực hiện xong
onStringTyped gọi khi đánh xong mỗi kí tự
preStringTyped gọi trước khi đánh mỗi kí tự
resetCallback gọi khi đánh lại kí tự

Xong chúc các bạn may mắn !