Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript

Chào các bạn đến với Blog của mình, trong bài viết ngày hôm nay thì mình sẽ chia sẻ cho các bạn code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript. Các bạn có thể xem demo như ảnh bên dưới và ở cuối bài viết.

Typing text animation hay còn gọi là hiệu ứng gõ văn bản hay chữ đánh máy có nghĩa là văn bản thay đổi tự động giống như hiệu ứng chữ đánh máy và như việc xoá đi rồi đánh lại văn bản.

Code hiệu ứng chữ đánh máy

Bước 1: Các bạn truy cập vào trang chỉnh sửa HTML của Blogger.

Bước 2: Thêm đoạn HTML hiển thị văn bản dạng như sau:

<span class="text first-text">I'm a</span>
<span class="text sec-text">Freelancer</span>

Trong đó:

• first-text là văn bản sẽ không thay đổi.
• sec-text là văn bản sẽ thay đổi và có hiệu ứng chữ đánh máy

Bước 3: Thêm đoạn JavaScipt sau vào trước thẻ </body>.

<script>//<![CDATA[
        const text = document.querySelector(".sec-text");
        const textLoad = () => {
            setTimeout(() => {
                text.textContent = "Freelancer";
            }, 0);
            setTimeout(() => {
                text.textContent = "Blogger";
            }, 4000);
            setTimeout(() => {
                text.textContent = "YouTuber";
            }, 8000); //1s = 1000 milliseconds
        }
        textLoad();
        setInterval(textLoad, 12000);
//]]></script>  

Thay thế nội dung trong đoạn text.textContent bằng nội dung đánh máy sẽ thay đổi. Các bạn có thể thêm nhiều chữ hơn bằng cách nhân bản hàm setTimeout và trong đó 1 giây sẽ bằng 1000 mili giây và khoảng các là 4 giây.

Bước 4: Thêm đoạn CSS sau vào trước thẻ </head>

<style>/* <![CDATA[ */
.text{position:relative;font-size:30px;font-weight:600}
.text.first-text{color:#333}
.text.sec-text{color:#4070F4}
.text.sec-text:before{content:"";position:absolute;top:0;left:0;height:100%;width:100%;background-color:#ffffff;border-left:2px solid #4070F4;animation:animate 4s steps(12) infinite}
@keyframes animate{40%,60%{left:calc(100% + 4px)}100%{left:0%}}
/* ]]> */</style>

Trong đó:

• color:#333 là màu văn bản hiển thị
• color:#4070F4 là màu văn và con trỏ đánh máy
• background-color:#ffffff là màu nền giống với mày backgroud nền chứa văn bản

Bước 5: Bấm lưu lại.

Lời kết

Vậy là vừa rồi mình đã chia sẻ cho các bạn Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript trong quá trình thực hiện có vấn đề gì các bạn có thể comment phía bên dưới mình sẽ hỗ trợ. Các bạn có thể xem demo dưới đây.

I'm aFreelancer