Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Cách Tạo Type Effect CSS Javascript Và 15 Ví Dụ Cho Website

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


Ngày 22 Tháng 1 Năm 2021

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.

Nguồn

Những Type Effect CSS Javascript Cho Website

Trước khi đi vào ví dụ thì mình có một số chú ý sau là để xem rõ kết quả hơn bạn chuyển sang chế độ screen 0.5x, 0.25x hay nếu nó không hiển thị thì bạn nhớ xác minh mình là con người trong Codepen mới xem được nhé. Nếu file là SCSS thì bạn có thể chuyển sang CSS ở đây nhé : SCSS to CSS. Nếu file là Pug thì bạn có thể chuyển sang HTML ở đây nhé : Pug to HTML. Nếu chúng ta muốn xem các nguồn được sử dụng trong Codepen để bạn thiết lập ở dưới máy tính thì nhấp vào chữ Resources ở dưới cùng bên trái của Codepen để xem các đường dẫn CDN nha.

Thiết Kế CSS Typing Effect

Kết quả bạn xem bên dưới nhé!

See the Pen CSS Typing Effect by Marko (@denic) on CodePen.

Nguồn

Thiết Kế Placeholder Typing Text JS

Kết quả bạn xem bên dưới nhé!

See the Pen Placeholder Typing Text by Michael Smart (@mikedevelops) on CodePen.

Nguồn

Cách Tạo Typewriter Effect CSS Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Typing Effect by Coding Journey (@Coding_Journey) on CodePen.

Nguồn

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

Kết quả bạn xem bên dưới nhé!

See the Pen TheaterJS by Gabin Aureche (@Zhouzi) on CodePen.

Nguồn

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

Kết quả bạn xem bên dưới nhé!

See the Pen Typing effect with JS by Ronnie Chong (@ronniechong) on CodePen.

Nguồn

Cách Tạo Gradient Typing Effect CSS

Kết quả bạn xem bên dưới nhé!

See the Pen Gradient typing effect in CSS by Jasmine G (@ladyjellington) on CodePen.

Nguồn

Cách Tạo Typewriter Effect Javascript

Kết quả bạn xem bên dưới nhé!

See the Pen Typing effect using JavaScript - Day 10 of #30Days30Projects by Ishaan Sheikh (@sheikh_ishaan) on CodePen.

Nguồn

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

Kết quả bạn xem bên dưới nhé!

See the Pen CodeVember 11/08 typing effect by Jarrod Thibodeau (@jarrodthibodeau) on CodePen.

Nguồn

Cách Tạo Text Rotate Typing Effect

Kết quả bạn xem bên dưới nhé!

See the Pen Text rotate typing effect by J Voorendt (@Hikisu) on CodePen.

Nguồn

Cách Tạo CSS Typewriter

Kết quả bạn xem bên dưới nhé!

See the Pen CSS typewriter by Daniel groen (@Danielgroen) on CodePen.

Nguồn

Cách Tạo Multiline Typewriter Effect JS

Kết quả bạn xem bên dưới nhé!

See the Pen Typewriter animation pure CSS by Thiago Teles Pereira (@thiagoteles) on CodePen.

Nguồn

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

Kết quả bạn xem bên dưới nhé!

See the Pen Text slider with typing animation in pure CSS by Adam Lewiński (@alewinski) on CodePen.

Nguồn

Cách Tạo SVG Text Animated Typing

Kết quả bạn xem bên dưới nhé!

See the Pen SVG Text: Animated Typing by Tiffany Rayside (@tmrDevelops) on CodePen.

Nguồn

Cách Tạo CSS Typing Animation

Kết quả bạn xem bên dưới nhé!

See the Pen Typing Effect by Van Huynh (@worksbyvan) on CodePen.

Nguồn

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

Kết quả bạn xem bên dưới nhé!

See the Pen Typing animation using CSS by Avaz Bokiev (@samarkandiy) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những hiệu ứng đánh chữ hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!