Tạo chuyển động chữ với TypedJS

Typed.js là một thư viện JavaScript hỗ trợ chuyển động gõ chữ. Nhập vào một chuỗi bất kỳ, bạn sẽ được quan sát nó gõ theo tốc độ bạn đặt sẵn, nó cũng tự động xóa đi và viết một câu mới, chuỗi mới nếu như bạn đặt.

Demo online: https://typedjs--kentrung.repl.co/
Link github: https://github.com/mattboldt/typed.js/

Code toàn bộ file index.html như sau:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo TypeJS</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div class="typejs">
        <div class="container">
            <div class="hello">
                <h1>I AM KENTRUNG</h1>
                <h4></h4>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/typed.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            var typed = new Typed('.hello h4', {
                strings: ["Web designer", "Graphic designer", "Photographer"],
                loop: true,
                typeSpeed: 30,
                cursorChar: '',
                startDelay: 1000
            });
        });
    </script>
</body>
</html>

Giải thích 1 số option:


strings   : ["Web designer", "Photographer"], // mảng chứa các chuỗi kí tự, chấp nhận cả HTML
typeSpeed : 30, // tốc độ xuất hiện
backSpeed : 30, // tốc độ lùi 
backDelay : 500, // thời gian trễ khi lùi
cursorChar: '/', // kí tự bên cạnh mỗi từ khi xuất hiện
startDelay: 1000, // thời gian trễ khi xuất hiện
loop      : false, // lặp lại chuyển động
fadeOut   : false, // xuất hiện kiểu fade
attr      : 'placeholder', // dùng cho placeholder ở input
bindInputFocusEvents: true,  
...

Xem code online tại: https://repl.it/@kentrung/TypedJS
Tải code tại: https://ufile.io/7z9kjste