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
Code hiệu ứng chữ đánh máy đẹp cho Blog sử dụng HTML CSS và JavaScript
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

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.

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

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 a Freelancer

0/5
0 ratings
5
4
3
2
1
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

3 Nhận xét

  • Chèn ảnh bằng cách dán trực tiếp link ảnh | Tool upload ảnh
  • Chèn video Youtube bằng cách dán trực tiếp link video
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

    1. iTechrum.com
      4/30/2022 10:56:00 CH

      Nhận xét này đã bị quản trị viên blog xóa.

      Trả lời Xóa
    2. Dung Môi Công Nghiệp
      7/07/2022 08:12:00 CH

      Blog e đang xài theme nào mà đẹp thế

      Trả lời Xóa
    Mới hơn Cũ hơn

    Maybe You Like

    Xin vui lòng xác nhận đồng ý nhận tin từ NLD Blog