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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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ẻ!