Cách Tạo Glitch Effect CSS Và 20 Ví Dụ Thực Tế Trong Website

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: glitch3 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 glitch3 {
     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.

Nguồn

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.

Nguồn

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.

Nguồn

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.

Nguồn