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

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


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

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.

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

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

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

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

Cách Tạo Glitch Effect CSS

Glitch Effect CSS

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

See the Pen Glitch by Lucas Bebber (@lbebber) on CodePen.

Nguồn

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.

Nguồn

Thiết Kế Image Glitch Effect CSS

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.

Nguồn

Thiết Kế Glitch Animate CSS

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.

Nguồn

Thiết Kế Glitch Effect Trang 404

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.

Nguồn

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.

Nguồn

Cách Tạo CSS3 Glitch Effect

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.

Nguồn

Cách Tạo Glitch Effect Với Variable CSS

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.

Nguồn

Cách Tạo Glitch Text Với Image Background

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.

Nguồn

Cách Tạo Glitch Text Animation

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.

Nguồn

Cách Tạo Glitch Text Effect HTML5 CSS3

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.

Nguồn

Cách Tạo Pure CSS Glitch Text

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.

Nguồn

Cách Tạo Javascript Glitch Text

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.

Nguồn

Cách Tạo Glitch Effect Button

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.

Nguồn

Cách Tạo Hover Link Glitch Effect

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.

Nguồn

Cách Tạo Text Glitch Effect SVG

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.

Nguồn

Cách Tạo Loading Glitch Effect

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.

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