This post contains a total of 7+ JavaScript Text Glitch Effect Examples with Source Code. All these Text Glitch Effects are made using JavaScript & Styled using CSS.
You can use the source code of these examples with credits to the original owner.
Related Posts
JavaScript Text Glitch Effect Examples
1. Multiple Glitch Effect
Made by Rasmus Bihl Andersson. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:400,900'>
<style>
.glitch--style-1 {
--gap-horizontal: 20px;
--gap-vertical: 2px;
--time-anim: 2.25s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: none;
--blend-mode-4: none;
--blend-mode-5: none;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: transparent;
--blend-color-4: transparent;
--blend-color-5: transparent;
}
.glitch--style-2 {
--gap-horizontal: 5px;
--gap-vertical: 10px;
--time-anim: 2s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: luminosity;
--blend-mode-4: none;
--blend-mode-5: none;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: #4d8c60;
--blend-color-4: transparent;
--blend-color-5: #c9b09a;
}
.glitch--style-3 {
--gap-horizontal: 20px;
--gap-vertical: 2px;
--time-anim: 2.25s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: multiply;
--blend-mode-4: none;
--blend-mode-5: none;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: #af4563;
--blend-color-4: transparent;
--blend-color-5: transparent;
}
.glitch--style-4 {
--gap-horizontal: 5px;
--gap-vertical: 20px;
--time-anim: 5s;
--blend-mode-1: none;
--blend-mode-2: exclusion;
--blend-mode-3: hard-light;
--blend-mode-4: overlay;
--blend-mode-5: none;
--blend-color-1: transparent;
--blend-color-2: #52f1cd;
--blend-color-3: #525df1;
--blend-color-4: #f19b52;
--blend-color-5: transparent;
}
.glitch--style-5 {
--gap-horizontal: 50px;
--gap-vertical: 100px;
--time-anim: 2.25s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: none;
--blend-mode-4: overlay;
--blend-mode-5: overlay;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: transparent;
--blend-color-4: #000;
--blend-color-5: #8d16f2;
}
.glitch--style-6 {
--gap-horizontal: 3px;
--gap-vertical: 70px;
--time-anim: 2.25s;
--blend-mode-1: none;
--blend-mode-2: none;
--blend-mode-3: overlay;
--blend-mode-4: none;
--blend-mode-5: none;
--blend-color-1: transparent;
--blend-color-2: transparent;
--blend-color-3: rgba(255,255,255,0.2);
--blend-color-4: transparent;
--blend-color-5: transparent;
}
.glitch {
position: relative;
display: inline-block;
margin: 0 0 8px;
overflow: hidden;
width: 95%;
}
.glitch:before, .glitch:after {
content: attr(data-text);
position: absolute;
width: 100%;
height: 100%;
background: #000000;
font: inherit;
visibility: hidden;
}
.glitch:before {
left: 2px;
text-shadow: -2px 0 #FF00F8;
clip: auto;
}
.glitch:after {
left: -2px;
text-shadow: -2px 0 #00D5FF;
clip: auto;
}
.glitch:before {
visibility: visible;
animation: glitch-anim-2 4s infinite linear alternate-reverse;
}
.glitch:after {
visibility: visible;
animation: glitch-anim 2.5s infinite linear alternate-reverse;
}
.glitch.style-2:before, .glitch.style-2:after {
animation-name: glitch-anim-2;
}
.glitch.style-1-hor:before, .glitch.style-1-hor:after {
animation-name: glitch-anim-1-horizontal;
}
.glitch.style-2-hor:before, .glitch.style-2-hor:after {
animation-name: glitch-anim-2-horizontal;
}
.glitch.style-3-hor:before, .glitch.style-3-hor:after {
animation-name: glitch-anim-3-horizontal;
}
.glitch.style-1-ver:before, .glitch.style-1-ver:after {
animation-name: glitch-anim-1-vertical;
}
.glitch.style-2-ver:before, .glitch.style-2-ver:after {
animation-name: glitch-anim-2-vertical;
}
.glitch.style-3-ver:before, .glitch.style-3-ver:after {
animation-name: glitch-anim-3-vertical;
}
.glitch.style-text:before, .glitch.style-text:after {
animation-name: glitch-anim-text;
}
.glitch.style-flash:before, .glitch.style-flash:after {
animation-name: glitch-anim-flash;
}
@keyframes glitch-anim {
0% {
clip: rect(29px, 9999px, 11px, 0);
}
4.16666667% {
clip: rect(11px, 9999px, 21px, 0);
}
8.33333333% {
clip: rect(18px, 9999px, 1px, 0);
}
12.5% {
clip: rect(17px, 9999px, 5px, 0);
}
16.66666667% {
clip: rect(3px, 9999px, 27px, 0);
}
20.83333333% {
clip: rect(20px, 9999px, 25px, 0);
}
25% {
clip: rect(25px, 9999px, 19px, 0);
}
29.16666667% {
clip: rect(12px, 9999px, 151px, 0);
}
33.33333333% {
clip: rect(29px, 9999px, 1px, 0);
}
37.5% {
clip: rect(24px, 9999px, 31px, 0);
}
41.66666667% {
clip: rect(9px, 9999px, 1px, 0);
}
45.83333333% {
clip: rect(1px, 9999px, 17px, 0);
}
50% {
clip: rect(3px, 9999px, 27px, 0);
}
54.16666667% {
clip: rect(17px, 9999px, 151px, 0);
}
58.33333333% {
clip: rect(15px, 9999px, 10px, 0);
}
62.5% {
clip: rect(1px, 9999px, 15px, 0);
}
66.66666667% {
clip: rect(10px, 9999px, 3px, 0);
}
70.83333333% {
clip: rect(27px, 9999px, 117px, 0);
}
75% {
clip: rect(2px, 9999px, 5px, 0);
}
79.16666667% {
clip: rect(4px, 9999px, 13px, 0);
}
83.33333333% {
clip: rect(8px, 9999px, 44px, 0);
}
87.5% {
clip: rect(13px, 9999px, 14px, 0);
}
91.66666667% {
clip: rect(21px, 9999px, 31px, 0);
}
95.83333333% {
clip: rect(0px, 9999px, 33px, 0);
}
100% {
clip: rect(9px, 9999px, 148px, 0);
}
}
@keyframes glitch-anim-2 {
6.66666667% {
clip: rect(43px, 9999px, 105px, 0);
}
10% {
clip: rect(5px, 9999px, 0px, 0);
}
13.33333333% {
clip: rect(16px, 9999px, 14px, 0);
}
16.66666667% {
clip: rect(12px, 9999px, 106px, 0);
}
20% {
clip: rect(1px, 9999px, 189px, 0);
}
23.33333333% {
clip: rect(20px, 9999px, 41px, 0);
}
26.66666667% {
clip: rect(30px, 9999px, 176px, 0);
}
30% {
clip: rect(12px, 9999px, 32px, 0);
}
33.33333333% {
clip: rect(22px, 9999px, 155px, 0);
}
36.66666667% {
clip: rect(14px, 9999px, 40px, 0);
}
40% {
clip: rect(25px, 9999px, 86px, 0);
}
43.33333333% {
clip: rect(13px, 9999px, 94px, 0);
}
46.66666667% {
clip: rect(1px, 9999px, 139px, 0);
}
50% {
clip: rect(14px, 9999px, 76px, 0);
}
53.33333333% {
clip: rect(2px, 9999px, 124px, 0);
}
56.66666667% {
clip: rect(6px, 9999px, 70px, 0);
}
60% {
clip: rect(9px, 9999px, 140px, 0);
}
63.33333333% {
clip: rect(7px, 9999px, 151px, 0);
}
66.66666667% {
clip: rect(1px, 9999px, 131px, 0);
}
70% {
clip: rect(21px, 9999px, 183px, 0);
}
73.33333333% {
clip: rect(11px, 9999px, 60px, 0);
}
76.66666667% {
clip: rect(91px, 9999px, 28px, 0);
}
80% {
clip: rect(14px, 9999px, 193px, 0);
}
83.33333333% {
clip: rect(2px, 9999px, 150px, 0);
}
86.66666667% {
clip: rect(3px, 9999px, 131px, 0);
}
90% {
clip: rect(17px, 9999px, 45px, 0);
}
93.33333333% {
clip: rect(18px, 9999px, 37px, 0);
}
96.66666667% {
clip: rect(9px, 9999px, 46px, 0);
}
100% {
clip: rect(38px, 9999px, 15px, 0);
}
}
/* Animations */
/* Horizontal */
@keyframes glitch-anim-1-horizontal {
0% {
-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
}
10% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
}
20% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
}
30% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
}
40% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
50% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
60% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
70% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
80% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
90% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
}
@keyframes glitch-anim-2-horizontal {
0% {
-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
}
15% {
-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
}
22% {
-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
}
31% {
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}
45% {
-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
}
51% {
-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
}
63% {
-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}
76% {
-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
}
81% {
-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
}
94% {
-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
}
100% {
-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
}
}
@keyframes glitch-anim-3-horizontal {
0% {
-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
}
5% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
}
10% {
-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
}
25% {
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
}
27% {
-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
}
30% {
-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
}
33% {
-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
}
37% {
-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
}
40% {
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
45% {
-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
}
50% {
-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
}
53% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
}
57% {
-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
}
65% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
}
70% {
-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
}
73% {
-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
}
80% {
-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
}
100% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
}
}
/* Vertical */
@keyframes glitch-anim-1-vertical {
0% {
-webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
}
10% {
-webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
}
20% {
-webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
}
30% {
-webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
}
40% {
-webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
}
50% {
-webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
}
60% {
-webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
}
70% {
-webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%);
}
80% {
-webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%);
}
90% {
-webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
}
100% {
-webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
}
}
@keyframes glitch-anim-2-vertical {
0% {
-webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
}
15% {
-webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
}
22% {
-webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
}
31% {
-webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
}
45% {
-webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
}
51% {
-webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
}
63% {
-webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
}
76% {
-webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
}
81% {
-webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
}
94% {
-webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
}
100% {
-webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
}
}
@keyframes glitch-anim-3-vertical {
0% {
-webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
}
5% {
-webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
}
10% {
-webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%);
}
25% {
-webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
}
27% {
-webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
}
30% {
-webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
}
33% {
-webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
}
37% {
-webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
}
40% {
-webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
}
45% {
-webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
}
50% {
-webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
}
53% {
-webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
}
57% {
-webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
}
60% {
-webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
}
65% {
-webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
}
70% {
-webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
}
73% {
-webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
}
80% {
-webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
}
100% {
-webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
}
}
@keyframes glitch-anim-text {
0% {
opacity: 1;
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
}
10% {
-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
}
20% {
-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
}
35% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
}
50% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
}
60% {
-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
}
70% {
-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
}
80% {
-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
}
90% {
transform: translate3d(-10px, 0, 0) scale3d(-1, -1, 1);
}
100% {
opacity: 1;
transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
}
/* Flash */
@keyframes glitch-anim-flash {
0% {
opacity: 0.2;
transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
}
33%, 100% {
opacity: 0;
transform: translate3d(0, 0, 0);
}
}
body {
padding: 0;
margin: 0;
border: 0;
font-family: "Titillium Web", "Helvetica", sans-serif;
font-weight: 900;
text-transform: uppercase;
background-color: #000000;
display: flex;
color: #ffffff;
justify-content: center;
align-items: center;
width: 100vw;
height: 100vh;
text-align: center;
font-size: 10vw;
}
select {
position: fixed;
bottom: 25px;
left: 50%;
transform: translateX(-50%);
opacity: 0.2;
transition: 0.3s ease;
}
select:hover {
opacity: 1;
}
</style>
</head>
<body>
<span data-text="Glitch this!" class="glitch">
Glitch this!
</span>
<select id="styleswitch">
<option value="style-1">Style #1</option>
<option value="style-2">Style #2</option>
<option value="style-1-hor">Style Horizontal #1</option>
<option value="style-2-hor">Style Horizontal #2</option>
<option value="style-3-hor">Style Horizontal #3</option>
<option value="style-1-ver">Style Vertical #1</option>
<option value="style-2-ver">Style Vertical #2</option>
<option value="style-3-ver">Style Vertical #3</option>
<option value="style-text">Style Text</option>
<option value="style-flash">Style Flash</option>
</select>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script>
//This just changes the style of the glitch
jQuery('#styleswitch').on('change', function () {
var gstyle = Math.floor(Math.random() * 5) + 1;
jQuery('.glitch').attr('class', 'glitch glitch--style-' + gstyle + ' ' + jQuery(this).val());
});
jQuery('#styleswitch').trigger('change');
//# sourceURL=pen.js
</script>
</body>
</html>2. Word glitch
Made by Quentin. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title>h</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
background: black;
}
.glitch {
color: white;
font-size: 100px;
position: relative;
width: 400px;
margin: 0 auto;
}
@-webkit-keyframes noise-anim {
0% {
clip: rect(43px, 9999px, 61px, 0);
}
5% {
clip: rect(95px, 9999px, 78px, 0);
}
10% {
clip: rect(64px, 9999px, 43px, 0);
}
15% {
clip: rect(18px, 9999px, 13px, 0);
}
20% {
clip: rect(53px, 9999px, 45px, 0);
}
25% {
clip: rect(28px, 9999px, 88px, 0);
}
30% {
clip: rect(38px, 9999px, 6px, 0);
}
35% {
clip: rect(68px, 9999px, 68px, 0);
}
40% {
clip: rect(60px, 9999px, 30px, 0);
}
45% {
clip: rect(41px, 9999px, 9px, 0);
}
50% {
clip: rect(29px, 9999px, 24px, 0);
}
55% {
clip: rect(13px, 9999px, 19px, 0);
}
60% {
clip: rect(86px, 9999px, 50px, 0);
}
65% {
clip: rect(16px, 9999px, 94px, 0);
}
70% {
clip: rect(2px, 9999px, 38px, 0);
}
75% {
clip: rect(67px, 9999px, 63px, 0);
}
80% {
clip: rect(21px, 9999px, 83px, 0);
}
85% {
clip: rect(85px, 9999px, 83px, 0);
}
90% {
clip: rect(81px, 9999px, 35px, 0);
}
95% {
clip: rect(94px, 9999px, 23px, 0);
}
100% {
clip: rect(81px, 9999px, 97px, 0);
}
}
@keyframes noise-anim {
0% {
clip: rect(43px, 9999px, 61px, 0);
}
5% {
clip: rect(95px, 9999px, 78px, 0);
}
10% {
clip: rect(64px, 9999px, 43px, 0);
}
15% {
clip: rect(18px, 9999px, 13px, 0);
}
20% {
clip: rect(53px, 9999px, 45px, 0);
}
25% {
clip: rect(28px, 9999px, 88px, 0);
}
30% {
clip: rect(38px, 9999px, 6px, 0);
}
35% {
clip: rect(68px, 9999px, 68px, 0);
}
40% {
clip: rect(60px, 9999px, 30px, 0);
}
45% {
clip: rect(41px, 9999px, 9px, 0);
}
50% {
clip: rect(29px, 9999px, 24px, 0);
}
55% {
clip: rect(13px, 9999px, 19px, 0);
}
60% {
clip: rect(86px, 9999px, 50px, 0);
}
65% {
clip: rect(16px, 9999px, 94px, 0);
}
70% {
clip: rect(2px, 9999px, 38px, 0);
}
75% {
clip: rect(67px, 9999px, 63px, 0);
}
80% {
clip: rect(21px, 9999px, 83px, 0);
}
85% {
clip: rect(85px, 9999px, 83px, 0);
}
90% {
clip: rect(81px, 9999px, 35px, 0);
}
95% {
clip: rect(94px, 9999px, 23px, 0);
}
100% {
clip: rect(81px, 9999px, 97px, 0);
}
}
.glitch:after {
content: attr(data-text);
position: absolute;
left: 2px;
text-shadow: -1px 0 red;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim 2s infinite linear alternate-reverse;
}
@-webkit-keyframes noise-anim-2 {
0% {
clip: rect(24px, 9999px, 62px, 0);
}
5% {
clip: rect(42px, 9999px, 23px, 0);
}
10% {
clip: rect(10px, 9999px, 15px, 0);
}
15% {
clip: rect(5px, 9999px, 61px, 0);
}
20% {
clip: rect(40px, 9999px, 56px, 0);
}
25% {
clip: rect(74px, 9999px, 19px, 0);
}
30% {
clip: rect(32px, 9999px, 23px, 0);
}
35% {
clip: rect(12px, 9999px, 71px, 0);
}
40% {
clip: rect(38px, 9999px, 64px, 0);
}
45% {
clip: rect(87px, 9999px, 85px, 0);
}
50% {
clip: rect(33px, 9999px, 73px, 0);
}
55% {
clip: rect(10px, 9999px, 41px, 0);
}
60% {
clip: rect(57px, 9999px, 33px, 0);
}
65% {
clip: rect(46px, 9999px, 91px, 0);
}
70% {
clip: rect(78px, 9999px, 66px, 0);
}
75% {
clip: rect(19px, 9999px, 29px, 0);
}
80% {
clip: rect(55px, 9999px, 44px, 0);
}
85% {
clip: rect(96px, 9999px, 94px, 0);
}
90% {
clip: rect(5px, 9999px, 88px, 0);
}
95% {
clip: rect(14px, 9999px, 60px, 0);
}
100% {
clip: rect(88px, 9999px, 91px, 0);
}
}
@keyframes noise-anim-2 {
0% {
clip: rect(24px, 9999px, 62px, 0);
}
5% {
clip: rect(42px, 9999px, 23px, 0);
}
10% {
clip: rect(10px, 9999px, 15px, 0);
}
15% {
clip: rect(5px, 9999px, 61px, 0);
}
20% {
clip: rect(40px, 9999px, 56px, 0);
}
25% {
clip: rect(74px, 9999px, 19px, 0);
}
30% {
clip: rect(32px, 9999px, 23px, 0);
}
35% {
clip: rect(12px, 9999px, 71px, 0);
}
40% {
clip: rect(38px, 9999px, 64px, 0);
}
45% {
clip: rect(87px, 9999px, 85px, 0);
}
50% {
clip: rect(33px, 9999px, 73px, 0);
}
55% {
clip: rect(10px, 9999px, 41px, 0);
}
60% {
clip: rect(57px, 9999px, 33px, 0);
}
65% {
clip: rect(46px, 9999px, 91px, 0);
}
70% {
clip: rect(78px, 9999px, 66px, 0);
}
75% {
clip: rect(19px, 9999px, 29px, 0);
}
80% {
clip: rect(55px, 9999px, 44px, 0);
}
85% {
clip: rect(96px, 9999px, 94px, 0);
}
90% {
clip: rect(5px, 9999px, 88px, 0);
}
95% {
clip: rect(14px, 9999px, 60px, 0);
}
100% {
clip: rect(88px, 9999px, 91px, 0);
}
}
.glitch:before {
content: attr(data-text);
position: absolute;
left: -2px;
text-shadow: 1px 0 blue;
top: 0;
color: white;
background: black;
overflow: hidden;
clip: rect(0, 900px, 0, 0);
animation: noise-anim-2 3s infinite linear alternate-reverse;
}
.varela {
font-family: 'Varela', sans-serif;
}
.open {
font-family: 'Open Sans', sans-serif;
}
.oswald {
font-family: 'Oswald', sans-serif;
}
</style>
</head>
<body>
<link href='https://fonts.googleapis.com/css?family=Varela' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<div class="glitch" data-text="GLITCH">GLITCH</div>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script>
class App {
constructor() {
this.$els = {
glitch: $('.glitch') };
this.fontFamily = ['varela', 'open', 'oswald'];
this.words = ['test', 'glitch', 'Quentin'];
}
glitch(delay) {
setInterval(() => {
this.removeFontFamily();
this.$els.glitch.addClass(this.getRandomFontFamily());
let text = this.getRandomWord();
this.$els.glitch.attr('data-text', text);
this.$els.glitch.text(text);
}, delay);
}
getRandomWord() {
return this.words[Math.floor(Math.random() * this.words.length)];
}
getRandomFontFamily() {
return this.fontFamily[Math.floor(Math.random() * this.fontFamily.length)];
}
removeFontFamily() {
for (let family of this.fontFamily) {
this.$els.glitch.removeClass(family);
}
}}
let app = new App();
app.glitch(1500);
</script>
</body>
</html>3. Text glitch transition effect
Made by Alessandro Valeri. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxP.ttf) format('truetype');
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
font-family: 'Roboto', sans-serif;
}
#list {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.item {
font-size: 50px;
padding: 15px;
display: inline-block;
margin: 20px;
display: none;
}
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<div id="list">
<div class="item red">Lorem ipsum dolor sit ametz</div>
<div class="item red"> ea impetus similique neglegentur</div>
<div class="item red"> Et harum quidem rerum facilis est et expedita distinctio</div>
<div class="item red"> officiis debitis aut rerum necessitatibus saepe</div>
<div class="item"><img width="210" height="213" title="" alt="" src="data:image/png;base64,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" />
</div>
<div class="item blue">contentiones. Nam</div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js'></script>
<script>
(function () {
var nodes, current;
function Animation(element) {
this.element = element;
this.stepMul = 10;
this.stepTo = 4;
this.element.style.visibility = "visible";
this.canvas = document.createElement("canvas");
this.canvas.style.visibility = "hidden";
this.canvas.style.position = "absolute";
this.canvas.style.width = this.element.offsetWidth + "px";
this.canvas.style.height = this.element.offsetHeight + "px";
this.canvas.style.top = this.element.offsetTop + "px";
this.canvas.style.left = this.element.offsetLeft + "px";
this.canvas.style.zIndex = "auto";
this.context = this.canvas.getContext('2d');
this.element.parentElement.appendChild(this.canvas);
};
Animation.prototype.loadCanvas = function (callback) {
var self = this;
html2canvas(this.element, {
onrendered: function (canvas) {
self.image = new Image();
self.image.src = canvas.toDataURL();
self.canvas.style.visibility = "visible";
self.element.style.visibility = "hidden";
callback && callback();
} });
};
Animation.prototype.hide = function () {
this.step = 0;
this.showing = false;
this.loadCanvas(this.render.bind(this));
};
Animation.prototype.show = function () {
this.step = 0;
this.showing = true;
this.loadCanvas(this.render.bind(this));
};
Animation.prototype.destroy = function () {
this.canvas && this.canvas.parentElement && this.canvas.parentElement.removeChild(this.canvas);
};
Animation.prototype.render = function () {
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.context.drawImage(this.image, 0, 0, this.canvas.width, this.canvas.height);
var inc = this.step / this.stepTo;
this.showing && (inc = 1 - inc);
for (var i = Math.floor(inc * this.stepMul) + 1, j = 0; j < i; j++) {if (window.CP.shouldStopExecution(0)) break;
var x = Math.random() * (this.canvas.width / 2),
y = Math.random() * this.canvas.height,
w = this.canvas.width - x,
h = 30 * Math.random() + 2;
this.context.clearRect(x, y, w, h);
this.context.clearRect(w, y, x, h);
this.context.drawImage(this.image, 0, y, w, h, x, y, w, h);
this.context.drawImage(this.image, w, y, x, h, 0, y, x, h);
}window.CP.exitedLoop(0);
if (this.step < this.stepTo) {
this.step++;
setTimeout(this.render.bind(this), Math.random() * 250);
} else {
this.destroy();
this.onComplete && this.onComplete();
}
};
function next() {
var nodeFrom = current,
nodeTo = current._next;
current = current._next;
nodeFrom.style.display = "block";
var a = new Animation(nodeFrom),
b;
a.onComplete = function () {
nodeFrom.style.display = "none";
nodeTo.style.display = "block";
b = new Animation(nodeTo);
b.onComplete = next;
b.show();
};
setTimeout(function () {a.hide();}, 3000);
}
function init() {
nodes = Array.prototype.slice.call(document.querySelectorAll(".item"));
nodes.forEach(function (value, index) {
if (index == nodes.length - 1)
nodes[index]._next = nodes[0];else
nodes[index]._next = nodes[index + 1];
});
current = nodes[0];
next();
}
document.addEventListener('DOMContentLoaded', function () {init();});
})();
</script>
</body>
</html>4. Text glitch on Hover
Made by Lars Steen Møller. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<style>
html,
body,
.container {
height: 100%;
}
body,
html {
background: #303030;
}
small {
text-transform: uppercase;
font-size: 8px;
}
.container {
/* Center slide text vertically */
display: flex;
justify-content: center;
align-items: center;
}
.container {
background: #212121;
}
a.btn {
color: white;
text-decoration: none;
text-transform: uppercase;
font-weight: 300;
letter-spacing: 2px;
}
a.btn:hover {
color: gold;
}
</style>
</head>
<body>
<div class="container">
<small>test</small><a href="#" class="btn text-code-hover-feel">Animate on hover OK?</a><small>teste</small>
</div>ddeetesd
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script>
$(document).ready(function () {
var charPool = "!<>-_\\/[]{}—=+*^?#________"; // Code feel
var button = $('.text-code-hover-feel');
button.attr("data-text-scramble-original", button.text());
extrachars = button.text();
var intevalzor;
button.
mouseenter(function () {
intevalzor = setInterval(function () {myTimer();}, 300); // Do a random int
function myTimer() {
console.log("doo stuff");
button.text(createRandomText(extrachars));
}
}).
mouseleave(function () {
$(this).text($(this).attr("data-text-scramble-original"));
clearInterval(intevalzor);
});
function createRandomText(extrachars)
{
var text = "";
var possible = "!<>-_\\/[]{}—=+*^?#________" + extrachars + extrachars + extrachars;
for (var i = 0; i < 20; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
var lengthOfText = getLenghtOfString(button.text());
var lengthOfPool = getLenghtOfString(charPool);
// console.log("TextLength: ", lengthOfText);
for (i = 0; i < lengthOfText; i++) {
console.log("hejsa");
var randomIntIndexText = selectRandomFrom(lengthOfText);
var randomIntIndexPool = selectRandomFrom(lengthOfPool);
var poolChar = getCharAtPosition(charPool, randomIntIndexPool);
}
// console.log("PoolLength ", lengthOfPool);
// console.log("Random From Text: ", selectRandomFrom(lengthOfText));
// console.log("Random From pool: ", selectRandomFrom(lengthOfPool));
getCharAtPosition(charPool, selectRandomFrom(lengthOfPool));
function getCharAtPosition(str, position) {
return str.charAt(position + 1); //daspdksaoda
}
function replaceCharInString(index, char) {
return str.substr(0, index) + 'char' + str.substr(index + 1);
}
function getLenghtOfString(element) {
return element.length;
}
function selectRandomFrom(number) {
//1 is the start number
//"number" is the number of possible results (1 + start (number) - end (1))
return Math.floor(Math.random() * number) + 1;
}
// usage str = str.replaceAt(3, "a");
function replaceLetterAt(index, character) {
return this.substr(0, index) + character + this.substr(index + character.length);
}
});
</script>
</body>
</html>5. Text Glitch
Made by Michael Hibbs. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Titillium+Web:200'>
<style>
* {
box-sizing: border-box;
}
body, html {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
body {
color: #555;
font-family: "Titillium Web", helvetica, arial, sans-serif;
background-color: #001331;
}
#app {
display: flex;
justify-content: center;
align-items: center;
align-content: center;
width: 100%;
height: 100%;
}
.glitch-paragraph {
width: 960px;
position: relative;
font-size: 4em;
color: #fff;
}
.glitch-paragraph::before {
display: initial;
content: attr(data-text);
position: absolute;
top: -2px;
left: -2px;
text-shadow: 3px 0 #fe0000;
background-color: #001d48;
overflow: hidden;
animation: glitch 3s infinite linear alternate-reverse;
}
@keyframes glitch {
100% {
-webkit-clip-path: inset(10px 0 183px 0);
clip-path: inset(10px 0 183px 0)
}
95% {
-webkit-clip-path: inset(124px 0 58px 0);
clip-path: inset(124px 0 58px 0)
}
90% {
-webkit-clip-path: inset(114px 0 85px 0);
clip-path: inset(114px 0 85px 0)
}
85% {
-webkit-clip-path: inset(79px 0 107px 0);
clip-path: inset(79px 0 107px 0)
}
80% {
-webkit-clip-path: inset(56px 0 139px 0);
clip-path: inset(56px 0 139px 0)
}
75% {
-webkit-clip-path: inset(21px 0 165px 0);
clip-path: inset(21px 0 165px 0)
}
70% {
-webkit-clip-path: inset(122px 0 31px 0);
clip-path: inset(122px 0 31px 0)
}
65% {
-webkit-clip-path: inset(50px 0 119px 0);
clip-path: inset(50px 0 119px 0)
}
60% {
-webkit-clip-path: inset(137px 0 37px 0);
clip-path: inset(137px 0 37px 0)
}
55% {
-webkit-clip-path: inset(65px 0 122px 0);
clip-path: inset(65px 0 122px 0)
}
50% {
-webkit-clip-path: inset(138px 0 21px 0);
clip-path: inset(138px 0 21px 0)
}
45% {
-webkit-clip-path: inset(2px 0 181px 0);
clip-path: inset(2px 0 181px 0)
}
40% {
-webkit-clip-path: inset(138px 0 59px 0);
clip-path: inset(138px 0 59px 0)
}
35% {
-webkit-clip-path: inset(20px 0 135px 0);
clip-path: inset(20px 0 135px 0)
}
30% {
-webkit-clip-path: inset(42px 0 157px 0);
clip-path: inset(42px 0 157px 0)
}
25% {
-webkit-clip-path: inset(48px 0 119px 0);
clip-path: inset(48px 0 119px 0)
}
20% {
-webkit-clip-path: inset(89px 0 76px 0);
clip-path: inset(89px 0 76px 0)
}
15% {
-webkit-clip-path: inset(129px 0 35px 0);
clip-path: inset(129px 0 35px 0)
}
10% {
-webkit-clip-path: inset(15px 0 142px 0);
clip-path: inset(15px 0 142px 0)
}
5% {
-webkit-clip-path: inset(123px 0 48px 0);
clip-path: inset(123px 0 48px 0)
}
}
</style>
</head>
<body>
<div id="app">
<div data-text='Lorem ipsum dolor sit amet, adipisicing hacker' class='glitch-paragraph'>
Lorem ipsum dolor sit amet, adipisicing <span class="word-switcher" data-words='programmer,hacker'></span>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js'></script>
<script>
var elapsedTicks = 0;
var ticksToChange = 40;
var wordSwitchers = document.querySelectorAll(".word-switcher");
function jumbleWord(word) {
var chars = "@#[]/?!";
word.innerText = _.shuffle(chars.split('')).join('');
}
function randomizeWord(word) {
var words = word.getAttribute("data-words").split(",");
word.innerText = _.sample(words);
}
function tick() {
elapsedTicks++;
if (elapsedTicks < 10) {
_.each(wordSwitchers, jumbleWord);
} else if (elapsedTicks == 10) {
_.each(wordSwitchers, randomizeWord);
} else if (elapsedTicks > ticksToChange) {
elapsedTicks = 0;
ticksToChange = _.random(40, 80);
}
}
setInterval(tick, 40);
</script>
</body>
</html>6. Text Glitch Reveal Animation
Made by Biotree. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/baffle.min.js"></script>
<style>
html,body{
padding:0;
margin:0;
border:0;
background-color:#0e1119;
}
.container{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
.data{
color:white;
font-family:'Poppins',sans-serif;
font-weight:500;
text-align:centre;
letter-spacing:.5rem;
font-size:31px;
}
</style>
</head>
<body>
<div class="container">
<div class="data">IAMHARSH-WEB DEVELOPER</div>
<script>
const text = baffle(".data");
text.set({
characters: '░▒░ ░██░> ████▓ >█> ░/█>█ ██░░ █<▒ ▓██░ ░/░▒',
speed: 120 });
text.start();
text.reveal(4000);
</script>
</body>
</html>7. CSS Text Glitch Effect – Baffle
Made by Rahul Chaudhary. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body{
color: #fff;
backgrounf: #fff;
font-family: Helvetica, sans-serif;
}
section{
width: 100%;
min-height: 100vh;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-moz-flex-wrap: wrap;
justify-content: center;
align-items: center;
background: #000;
}
.text__glitch{
font-size: 30px;
letter-spacing: 1px;
text-align: center;
text-transform: Uppercase;
}
</style>
</head>
<body>
<main>
<section class="section--1">
<h3 class="text__glitch">Text Glitch Effect Using Baffle.JS</h3>
</section>
</main>
<script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/baffle.min.js'></script>
<script>
//Baffle
const text = baffle(".text__glitch");
text.set({
characters: "█▓█ ▒░/▒░ █░▒▓/ █▒▒ ▓▒▓/█ ░█▒/ ▒▓░ █<░▒ ▓/░>",
speed: 120 });
text.start();
text.reveal(4000);
</script>
</body>
</html>8. Text glitch effect
Made by TehMerow. Source
<!DOCTYPE html>
<html lang="en" >
<head>
<title></title>
<link href="https://fonts.googleapis.com/css?family=Passion+One" rel="stylesheet">
<style>
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #111;
}
#cyberpunk {
margin: 0;
padding: 0;
letter-spacing: 40px;
filter: drop-shadow(0 0 20px hsla(320, 40%, 60%, 0.8));
font-size: 64px;
position: relative;
z-index: 1;
font-family: 'Passion One', cursive;
font-style: italic;
}
.text:nth-child(1) {
color: hsl(320, 90%, 90%);
-webkit-clip-path: inset(40% 0% 40% 0%);
clip-path: inset(40% 0% 40% 0%);
z-index: 5;
}
.text:nth-child(2) {
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: hsl(260, 90%, 80%);
-webkit-clip-path: inset(0% 0% 60% 0%);
clip-path: inset(0% 0% 60% 0%);
-webkit-animation: random1 1000ms steps(1) alternate infinite;
animation: random1 1000ms steps(1) alternate infinite;
}
.text:nth-child(3) {
position: absolute;
top: 0;
left: 0;
z-index: 10;
color: hsl(260, 90%, 50%);
-webkit-clip-path: inset(60% 0% 0% 0%);
clip-path: inset(60% 0% 0% 0%);
-webkit-animation: random2 1000ms steps(1) alternate infinite;
animation: random2 1000ms steps(1) alternate infinite;
}
.thing-1 {
position: absolute;
left: 0;
top: 20%;
height: 50%;
width: 100%;
background-color: hsl(225, 100%, 40%);
z-index: -1;
-webkit-animation: random-clip-1 20s steps(1) infinite;
animation: random-clip-1 20s steps(1) infinite;
}
#scanline {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
z-index: 100;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
background-size: 100% 2px;
}
</style>
</head>
<body>
<div class="wrapper">
<div id="cyberpunk">
<h1 class="text">huh?</h1>
<h1 class="text">huh?</h1>
<h1 class="text">huh?</h1>
<div class="thing-1"></div>
</div>
<div id="scanline"></div>
</div>
<script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
<script>
Math.Ran = function (max) {
let rn = Math.round(Math.random() * max);
rn *= Math.random() > 0.5 ? -1 : 1;
return rn;
};
function generateRandomKeyFrames(dis, len, name) {
let keyframes = ``;
for (var i = 0; i < len; i++) {if (window.CP.shouldStopExecution(0)) break;
keyframes += `${i / len * 100}%{transform: translateX(${Math.Ran(dis)}px)}`;
}window.CP.exitedLoop(0);
let style = document.createElement('style');
style.innerHTML = `@keyframes ${name} { ${keyframes} }`;
document.body.appendChild(style);
}
function generateRandomClipFrames(len, name) {
let keyframes = ``;
let size = 100;
for (var i = 0; i < len; i++) {if (window.CP.shouldStopExecution(1)) break;
keyframes +=
`${i / len * 100}%{
clip-path: inset(${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}% ${Math.Ran(size)}%)
}`;
}window.CP.exitedLoop(1);
let style = document.createElement('style');
style.innerHTML = `@keyframes ${name} {
${keyframes}
}`;
document.body.appendChild(style);
}
generateRandomKeyFrames(15, 16, "random1");
generateRandomKeyFrames(10, 10, "random2");
generateRandomClipFrames(200, "random-clip-1");
</script>
</body>
</html>