Hi, Phòng khách!
Trang chủ
Đăng nhập
Công Cụ Tìm Kiếm

Lần hoạt động

| |
Tìm kiếm

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

Bài viết được duyệt bởi PuaruVN
Đăng ngày :29.01.2016 / 23:18[TOP]
No1vn
No1vn
Active Member
♥♥♥♥
Đâ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
PHP Code:
<?php
.typed-cursor{
    
opacity1;
    -
webkit-animationblink 0.7s infinite;
    -
moz-animationblink 0.7s infinite;
    
animationblink 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
PHP Code:
<?php
$(function(){
      $(
".element").typed({
        
strings: ["Dòng chữ đầu.""Dòng thứ hai."],
        
typeSpeed0
      
});
  });
?>

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:
PHP Code:
<?php
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 !
Đăng ngày :29.01.2016 / 23:22 #1
Nhok
Nhok
Active Member
[Tôi Yêu Thuý]
Up nào.
Bình luận bài viết
Đăng Nhập để Bình luận và sử dụng đầy đủ tính năng Diễn Đàn
  Tổng số: 2 Bình luận

Chia sẻ bài viết
Đám Mây Từ Khóa
Bài Viết Cùng chuyên mục
Lọc theo tác giả
Xem chủ để ngoại tuyến (Offline)

Trong diễn đàn

Sắp xếp theo thứ tự từ trên xuống
BigTruyen.info - Kho Truyện Tranh Online Khổng lồ
Trang chủ