Cách Tạo Type Effect CSS Javascript Và 15 Ví Dụ Cho Website

Ngày hôm nay chúng ta cùng nhau đi vào tìm hiểu cách tạo hiệu ứng đánh chữ bằng HTML, CSS, Javascript và các ví dụ thực tế trong thiết kế, phát triển web nhé!

Cách Tạo Hiệu Ứng Đánh Chữ Cơ Bản

Trong phần này chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng đánh chữ cơ bản bằng Javascript ở đoạn mã dưới đây nhé!

HTML

  <a class="button1" onclick="typeWriter()">
   <span class="btn1">Run Effect</span>
  </a>
  <p id="hieu_ung_danh_chu"></p>

CSS

.button1 {
    background-image: linear-gradient(135deg, #008aff, #86d472);
    border-radius: 6px;
    box-sizing: border-box;
    color: #ffffff;
    display: block;
    height: 50px;
    font-size: 1.2em;
    font-weight: 600;
    padding: 4px;
    position: relative;
    text-decoration: none;
    width: 7em;
    z-index: 2;
   cursor: pointer;
  }
 .button1:hover {
    color: #fff;
  }
 .button1 .btn1 {
    align-items: center;
    background: #0e0e10;
    border-radius: 6px;
    display: flex;
    justify-content: center;
    height: 100%;
    transition: background 0.5s ease;
    width: 100%;
  }
 .button1:hover .btn1 {
    background: transparent;
 }

Javascript

 var i = 0;
 var vanBan = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pulvinar dolor ut imperdiet congue. Nunc vel eleifend ipsum. Praesent in facilisis leo';
 var tocDo = 50;
function typeWriter() {
   if (i < vanBan.length) {
     document.getElementById("hieu_ung_danh_chu").innerHTML += vanBan.charAt(i);
     i++;
     setTimeout(typeWriter, tocDo );
   }
 }

Và kết quả của hiệu ứng này thì bạn xem dự án bên dưới nhé:

See the Pen Type Effect Simple by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tìm hiểu kỹ hơn cách tạo hiệu ứng đánh chữ thì có thể truy cập bài viết của mình ở đường dẫn bên dưới nha.

Cách Tạo Type Effect CSS Javascript Và 15 Ví Dụ Cho Website

Cách Tạo Hiệu Ứng Đánh Chữ Cơ Bản

HTML

CSS

Javascript

Những Type Effect CSS Javascript Cho Website

Thiết Kế CSS Typing Effect

Thiết Kế Placeholder Typing Text JS

Cách Tạo Typewriter Effect CSS Javascript

Cách Tạo Typewriter Effect Bằng Theater JS

Cách Tạo Typing Effect Với JS

Cách Tạo Gradient Typing Effect CSS

Cách Tạo Typewriter Effect Javascript

Cách Tạo Typing Và Erasing Animation Javascript

Cách Tạo Text Rotate Typing Effect

Cách Tạo CSS Typewriter

Cách Tạo Multiline Typewriter Effect JS

Cách Tạo Text Slider Với Typing Animation

Cách Tạo SVG Text Animated Typing

Cách Tạo CSS Typing Animation

Cách Tạo Typing Animation Sử Dụng CSS

Tổng kết:

Từ Khóa

CSS HTML Javascript Nguồn Lập Trình Wordpress

Góc trả lời