Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo glitch effect và các ví dụ thực tế trong website bằng HTML CSS Javascript cho thiết kế và phát triển web nhé!
Cách Tạo Glitch Effect CSS
Bước đầu tiên chúng ta sẽ đi vào tạo cấu trúc HTML cho hiệu ứng này bằng đoạn mã sau đây nhé!
HTML
<div id="glitch-effect">
<h2>Hello</h2>
<h2>Hello</h2>
<h2>Hello</h2>
</div>
Bước tiếp theo chúng ta sẽ thiết lập hiệu ứng glitch effect bằng thuộc tính animation
trong CSS thông qua đoạn code dưới đây nha:
CSS
#glitch-effect{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Noto Sans JP', sans-serif;
}
h2 {
text-align: center;
color: #d9fff9;
font-size: 80px;
letter-spacing: 6px;
font-weight: 300;
margin: 0;
line-height: 0;
animation: glitch1 0.5s infinite;
}
h2:nth-child(2) {
color: #00bfff;
animation: glitch2 1.0s infinite;
}
h2:nth-child(3) {
color: #ff0080;
animation: glitch2 1.0s infinite;
}
@keyframes glitch1 {
0% {
transform: none;
opacity: 1;
}
50% {
transform: skew(-2deg, 0.6deg);
opacity: 0.75;
}
100% {
transform: none;
opacity: 1;
}
}
@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
}
50% {
transform: translate(-3px, -1px);
opacity: 0.5;
}
100% {
transform: none;
opacity: 0.25;
}
@keyframes glitch2 {
0% {
transform: none;
opacity: 0.25;
}
50% {
transform: translate(3px, 1px);
opacity: 0.5;
}
100% {
transform: none;
opacity: 0.25;
}
}
Và kết quả bạn xem dự án Codepen bên dưới nhé:
See the Pen gOwyrgj by haycuoilennao19 (@haycuoilennao19) on CodePen.
Các Ví Dụ Glitch Effect Khác Cho Website
Bây giờ chúng ta sẽ đi vào những ví dụ về mega menu do các bạn lập trình viên trên Codepen thiết kế và phát triển nhé!
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 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.
Cách Tạo Glitch Effect SVG

Kết quả bạn xem bên dưới nhé!
See the Pen Universal SVG Glitch by Dirk Weber (@DirkWeber) on CodePen.
Cách Tạo Glitch Image Effect

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch Effect by takashi (@tksiiii) on CodePen.
Cách Tạo Glitching Text CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Glitching Text (SCSS) by Isaac Doud (@cipherbeta) on CodePen.
Cách Tạo Glitch Effect CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch by Lucas Bebber (@lbebber) on CodePen.
Tổng Hợp Các Glitch Effect CSS
Kết quả bạn xem bên dưới nhé!
See the Pen Glitch effect in CSS by Thomas Aufresne (@origine) on CodePen.
Thiết Kế Image Glitch Effect CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Image glitch effect by Alain (@AlainBarrios) on CodePen.
Thiết Kế Glitch Animate CSS

Kết quả bạn xem bên dưới nhé!
See the Pen glitch effect — week 9/52 by Mert Cukuren (@knyttneve) on CodePen.
Thiết Kế Glitch Effect Trang 404

Kết quả bạn xem bên dưới nhé!
See the Pen 404 Glitch Effect by Dave DeHaan (@davedehaan) on CodePen.
Cách Tạo Hiệu Ứng Hover Glitch Effect
Kết quả bạn xem bên dưới nhé!
See the Pen Glitch hover effect CSS by Kevin Konrad Henriquez (@kkhenriquez) on CodePen.
Cách Tạo CSS3 Glitch Effect

Kết quả bạn xem bên dưới nhé!
See the Pen Glitchin' Image by Tiffany Rayside (@tmrDevelops) on CodePen.
Cách Tạo Glitch Effect Với Variable CSS

Kết quả bạn xem bên dưới nhé!
See the Pen Psycho Glitch (CSS variables & @keyframes) by Alex Nozdriukhin (@alexnoz) on CodePen.
Cách Tạo Glitch Text Với Image Background

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch text with image background by Marcel Legane (@marcellegane) on CodePen.
Cách Tạo Glitch Text Animation

Kết quả bạn xem bên dưới nhé!
See the Pen Glitched Text (study of The Verge) by Derek Palladino (@derekjp) on CodePen.
Cách Tạo Glitch Text Effect HTML5 CSS3

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch by Christian Petersen (@cbp) on CodePen.
Cách Tạo Pure CSS Glitch Text

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch Text by Chase (@chasebank) on CodePen.
Cách Tạo Javascript Glitch Text

Kết quả bạn xem bên dưới nhé!
See the Pen glitch hello world by sean_codes (@sean_codes) on CodePen.
Cách Tạo Glitch Effect Button

Kết quả bạn xem bên dưới nhé!
See the Pen Glitch buttons - WebGL by Andrew Vereshchak (@multum) on CodePen.
Cách Tạo Hover Link Glitch Effect

Kết quả bạn xem bên dưới nhé!
See the Pen Hover Effects - Glitch by Julien Lejeune (@jlnljn) on CodePen.
Cách Tạo Text Glitch Effect SVG

Kết quả bạn xem bên dưới nhé!
See the Pen whatthehack Pusher by Alex Pate (@alexpate) on CodePen.
Cách Tạo Loading Glitch Effect

Kết quả bạn xem bên dưới nhé!
See the Pen Loading glitch by Alberto Jerez (@ajerez) on CodePen.
Nếu bạn muốn tham khảo các zoom effect thì truy cập đường dẫn bên dưới nha.
Zoom Effect
Nếu bạn muốn tham khảo các parallax effect thì truy cập đường dẫn bên dưới nha.
Parallax Effect
Nếu bạn muốn tham khảo các card effects thì truy cập đường dẫn bên dưới nha.
Card Effects
Tổng kết:
Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những glitch effect 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ẻ!