Author: | Chinmay-P-Ashrit |
---|---|
Views Total: | 465 views |
Official Page: | Go to website |
Last Update: | February 11, 2022 |
License: | MIT |
Preview:

Description:
CSS can be used to produce some really cool effects that you previously could only achieve with images. Text on web pages is often overlooked, but it actually has a lot more flexibility than you might think.
In this tutorial, we will be looking at creating an advanced text glitch effect. By simply tweaking a few CSS properties, we can create a glitched out text effect that looks exceptionally cool and also creates an illusion that the letters are jumping or moving.
How to use it:
1. Add your own glitch text to the page.
<div class="glitch" data-text="GlitchText">GlitchText</div> <div class="glow">GlitchText</div> <div class="scanlines"></div>
2. The main CSS rules for the glitch effect.
.glitch, .glow { color: #dfbfbf; position: relative; font-size: 9vw; -webkit-animation: glitch 5s 5s infinite; animation: glitch 5s 5s infinite; } .glitch::before, .glow::before { content: attr(data-text); position: absolute; left: -2px; text-shadow: -5px 0 magenta; background: black; overflow: hidden; top: 0; -webkit-animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite; animation: noise-1 3s linear infinite alternate-reverse, glitch 5s 5.05s infinite; } .glitch::after, .glow::after { content: attr(data-text); position: absolute; left: 2px; text-shadow: -5px 0 lightgreen; background: black; overflow: hidden; top: 0; -webkit-animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite; } @-webkit-keyframes glitch { 1% { transform: rotateX(10deg) skewX(90deg); } 2% { transform: rotateX(0deg) skewX(0deg); } } @keyframes glitch { 1% { transform: rotateX(10deg) skewX(90deg); } 2% { transform: rotateX(0deg) skewX(0deg); } } @-webkit-keyframes noise-1 { 3.3333333333% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 6.6666666667% { -webkit-clip-path: inset(95px 0 2px 0); clip-path: inset(95px 0 2px 0); } 10% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 13.3333333333% { -webkit-clip-path: inset(52px 0 10px 0); clip-path: inset(52px 0 10px 0); } 16.6666666667% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 20% { -webkit-clip-path: inset(90px 0 10px 0); clip-path: inset(90px 0 10px 0); } 23.3333333333% { -webkit-clip-path: inset(37px 0 2px 0); clip-path: inset(37px 0 2px 0); } 26.6666666667% { -webkit-clip-path: inset(83px 0 18px 0); clip-path: inset(83px 0 18px 0); } 30% { -webkit-clip-path: inset(1px 0 40px 0); clip-path: inset(1px 0 40px 0); } 33.3333333333% { -webkit-clip-path: inset(89px 0 2px 0); clip-path: inset(89px 0 2px 0); } 36.6666666667% { -webkit-clip-path: inset(84px 0 12px 0); clip-path: inset(84px 0 12px 0); } 40% { -webkit-clip-path: inset(66px 0 4px 0); clip-path: inset(66px 0 4px 0); } 43.3333333333% { -webkit-clip-path: inset(94px 0 5px 0); clip-path: inset(94px 0 5px 0); } 46.6666666667% { -webkit-clip-path: inset(24px 0 16px 0); clip-path: inset(24px 0 16px 0); } 50% { -webkit-clip-path: inset(34px 0 63px 0); clip-path: inset(34px 0 63px 0); } 53.3333333333% { -webkit-clip-path: inset(15px 0 36px 0); clip-path: inset(15px 0 36px 0); } 56.6666666667% { -webkit-clip-path: inset(64px 0 29px 0); clip-path: inset(64px 0 29px 0); } 60% { -webkit-clip-path: inset(81px 0 13px 0); clip-path: inset(81px 0 13px 0); } 63.3333333333% { -webkit-clip-path: inset(23px 0 71px 0); clip-path: inset(23px 0 71px 0); } 66.6666666667% { -webkit-clip-path: inset(49px 0 11px 0); clip-path: inset(49px 0 11px 0); } 70% { -webkit-clip-path: inset(20px 0 48px 0); clip-path: inset(20px 0 48px 0); } 73.3333333333% { -webkit-clip-path: inset(48px 0 11px 0); clip-path: inset(48px 0 11px 0); } 76.6666666667% { -webkit-clip-path: inset(43px 0 3px 0); clip-path: inset(43px 0 3px 0); } 80% { -webkit-clip-path: inset(97px 0 3px 0); clip-path: inset(97px 0 3px 0); } 83.3333333333% { -webkit-clip-path: inset(57px 0 15px 0); clip-path: inset(57px 0 15px 0); } 86.6666666667% { -webkit-clip-path: inset(89px 0 6px 0); clip-path: inset(89px 0 6px 0); } 90% { -webkit-clip-path: inset(51px 0 33px 0); clip-path: inset(51px 0 33px 0); } 93.3333333333% { -webkit-clip-path: inset(50px 0 23px 0); clip-path: inset(50px 0 23px 0); } 96.6666666667% { -webkit-clip-path: inset(45px 0 7px 0); clip-path: inset(45px 0 7px 0); } 100% { -webkit-clip-path: inset(32px 0 27px 0); clip-path: inset(32px 0 27px 0); } } @keyframes noise-1 { 3.3333333333% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 6.6666666667% { -webkit-clip-path: inset(95px 0 2px 0); clip-path: inset(95px 0 2px 0); } 10% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 13.3333333333% { -webkit-clip-path: inset(52px 0 10px 0); clip-path: inset(52px 0 10px 0); } 16.6666666667% { -webkit-clip-path: inset(97px 0 4px 0); clip-path: inset(97px 0 4px 0); } 20% { -webkit-clip-path: inset(90px 0 10px 0); clip-path: inset(90px 0 10px 0); } 23.3333333333% { -webkit-clip-path: inset(37px 0 2px 0); clip-path: inset(37px 0 2px 0); } 26.6666666667% { -webkit-clip-path: inset(83px 0 18px 0); clip-path: inset(83px 0 18px 0); } 30% { -webkit-clip-path: inset(1px 0 40px 0); clip-path: inset(1px 0 40px 0); } 33.3333333333% { -webkit-clip-path: inset(89px 0 2px 0); clip-path: inset(89px 0 2px 0); } 36.6666666667% { -webkit-clip-path: inset(84px 0 12px 0); clip-path: inset(84px 0 12px 0); } 40% { -webkit-clip-path: inset(66px 0 4px 0); clip-path: inset(66px 0 4px 0); } 43.3333333333% { -webkit-clip-path: inset(94px 0 5px 0); clip-path: inset(94px 0 5px 0); } 46.6666666667% { -webkit-clip-path: inset(24px 0 16px 0); clip-path: inset(24px 0 16px 0); } 50% { -webkit-clip-path: inset(34px 0 63px 0); clip-path: inset(34px 0 63px 0); } 53.3333333333% { -webkit-clip-path: inset(15px 0 36px 0); clip-path: inset(15px 0 36px 0); } 56.6666666667% { -webkit-clip-path: inset(64px 0 29px 0); clip-path: inset(64px 0 29px 0); } 60% { -webkit-clip-path: inset(81px 0 13px 0); clip-path: inset(81px 0 13px 0); } 63.3333333333% { -webkit-clip-path: inset(23px 0 71px 0); clip-path: inset(23px 0 71px 0); } 66.6666666667% { -webkit-clip-path: inset(49px 0 11px 0); clip-path: inset(49px 0 11px 0); } 70% { -webkit-clip-path: inset(20px 0 48px 0); clip-path: inset(20px 0 48px 0); } 73.3333333333% { -webkit-clip-path: inset(48px 0 11px 0); clip-path: inset(48px 0 11px 0); } 76.6666666667% { -webkit-clip-path: inset(43px 0 3px 0); clip-path: inset(43px 0 3px 0); } 80% { -webkit-clip-path: inset(97px 0 3px 0); clip-path: inset(97px 0 3px 0); } 83.3333333333% { -webkit-clip-path: inset(57px 0 15px 0); clip-path: inset(57px 0 15px 0); } 86.6666666667% { -webkit-clip-path: inset(89px 0 6px 0); clip-path: inset(89px 0 6px 0); } 90% { -webkit-clip-path: inset(51px 0 33px 0); clip-path: inset(51px 0 33px 0); } 93.3333333333% { -webkit-clip-path: inset(50px 0 23px 0); clip-path: inset(50px 0 23px 0); } 96.6666666667% { -webkit-clip-path: inset(45px 0 7px 0); clip-path: inset(45px 0 7px 0); } 100% { -webkit-clip-path: inset(32px 0 27px 0); clip-path: inset(32px 0 27px 0); } } @-webkit-keyframes noise-2 { 0% { -webkit-clip-path: inset(26px 0 46px 0); clip-path: inset(26px 0 46px 0); } 3.3333333333% { -webkit-clip-path: inset(22px 0 5px 0); clip-path: inset(22px 0 5px 0); } 6.6666666667% { -webkit-clip-path: inset(91px 0 2px 0); clip-path: inset(91px 0 2px 0); } 10% { -webkit-clip-path: inset(88px 0 4px 0); clip-path: inset(88px 0 4px 0); } 13.3333333333% { -webkit-clip-path: inset(84px 0 10px 0); clip-path: inset(84px 0 10px 0); } 16.6666666667% { -webkit-clip-path: inset(99px 0 1px 0); clip-path: inset(99px 0 1px 0); } 20% { -webkit-clip-path: inset(40px 0 1px 0); clip-path: inset(40px 0 1px 0); } 23.3333333333% { -webkit-clip-path: inset(95px 0 4px 0); clip-path: inset(95px 0 4px 0); } 26.6666666667% { -webkit-clip-path: inset(13px 0 67px 0); clip-path: inset(13px 0 67px 0); } 30% { -webkit-clip-path: inset(66px 0 18px 0); clip-path: inset(66px 0 18px 0); } 33.3333333333% { -webkit-clip-path: inset(75px 0 6px 0); clip-path: inset(75px 0 6px 0); } 36.6666666667% { -webkit-clip-path: inset(89px 0 4px 0); clip-path: inset(89px 0 4px 0); } 40% { -webkit-clip-path: inset(34px 0 17px 0); clip-path: inset(34px 0 17px 0); } 43.3333333333% { -webkit-clip-path: inset(15px 0 78px 0); clip-path: inset(15px 0 78px 0); } 46.6666666667% { -webkit-clip-path: inset(15px 0 56px 0); clip-path: inset(15px 0 56px 0); } 50% { -webkit-clip-path: inset(62px 0 36px 0); clip-path: inset(62px 0 36px 0); } 53.3333333333% { -webkit-clip-path: inset(26px 0 28px 0); clip-path: inset(26px 0 28px 0); } 56.6666666667% { -webkit-clip-path: inset(58px 0 1px 0); clip-path: inset(58px 0 1px 0); } 60% { -webkit-clip-path: inset(68px 0 7px 0); clip-path: inset(68px 0 7px 0); } 63.3333333333% { -webkit-clip-path: inset(57px 0 5px 0); clip-path: inset(57px 0 5px 0); } 66.6666666667% { -webkit-clip-path: inset(32px 0 3px 0); clip-path: inset(32px 0 3px 0); } 70% { -webkit-clip-path: inset(44px 0 40px 0); clip-path: inset(44px 0 40px 0); } 73.3333333333% { -webkit-clip-path: inset(48px 0 50px 0); clip-path: inset(48px 0 50px 0); } 76.6666666667% { -webkit-clip-path: inset(89px 0 5px 0); clip-path: inset(89px 0 5px 0); } 80% { -webkit-clip-path: inset(24px 0 21px 0); clip-path: inset(24px 0 21px 0); } 83.3333333333% { -webkit-clip-path: inset(97px 0 2px 0); clip-path: inset(97px 0 2px 0); } 86.6666666667% { -webkit-clip-path: inset(93px 0 7px 0); clip-path: inset(93px 0 7px 0); } 90% { -webkit-clip-path: inset(68px 0 17px 0); clip-path: inset(68px 0 17px 0); } 93.3333333333% { -webkit-clip-path: inset(43px 0 19px 0); clip-path: inset(43px 0 19px 0); } 96.6666666667% { -webkit-clip-path: inset(93px 0 1px 0); clip-path: inset(93px 0 1px 0); } 100% { -webkit-clip-path: inset(19px 0 26px 0); clip-path: inset(19px 0 26px 0); } } @keyframes noise-2 { 0% { -webkit-clip-path: inset(26px 0 46px 0); clip-path: inset(26px 0 46px 0); } 3.3333333333% { -webkit-clip-path: inset(22px 0 5px 0); clip-path: inset(22px 0 5px 0); } 6.6666666667% { -webkit-clip-path: inset(91px 0 2px 0); clip-path: inset(91px 0 2px 0); } 10% { -webkit-clip-path: inset(88px 0 4px 0); clip-path: inset(88px 0 4px 0); } 13.3333333333% { -webkit-clip-path: inset(84px 0 10px 0); clip-path: inset(84px 0 10px 0); } 16.6666666667% { -webkit-clip-path: inset(99px 0 1px 0); clip-path: inset(99px 0 1px 0); } 20% { -webkit-clip-path: inset(40px 0 1px 0); clip-path: inset(40px 0 1px 0); } 23.3333333333% { -webkit-clip-path: inset(95px 0 4px 0); clip-path: inset(95px 0 4px 0); } 26.6666666667% { -webkit-clip-path: inset(13px 0 67px 0); clip-path: inset(13px 0 67px 0); } 30% { -webkit-clip-path: inset(66px 0 18px 0); clip-path: inset(66px 0 18px 0); } 33.3333333333% { -webkit-clip-path: inset(75px 0 6px 0); clip-path: inset(75px 0 6px 0); } 36.6666666667% { -webkit-clip-path: inset(89px 0 4px 0); clip-path: inset(89px 0 4px 0); } 40% { -webkit-clip-path: inset(34px 0 17px 0); clip-path: inset(34px 0 17px 0); } 43.3333333333% { -webkit-clip-path: inset(15px 0 78px 0); clip-path: inset(15px 0 78px 0); } 46.6666666667% { -webkit-clip-path: inset(15px 0 56px 0); clip-path: inset(15px 0 56px 0); } 50% { -webkit-clip-path: inset(62px 0 36px 0); clip-path: inset(62px 0 36px 0); } 53.3333333333% { -webkit-clip-path: inset(26px 0 28px 0); clip-path: inset(26px 0 28px 0); } 56.6666666667% { -webkit-clip-path: inset(58px 0 1px 0); clip-path: inset(58px 0 1px 0); } 60% { -webkit-clip-path: inset(68px 0 7px 0); clip-path: inset(68px 0 7px 0); } 63.3333333333% { -webkit-clip-path: inset(57px 0 5px 0); clip-path: inset(57px 0 5px 0); } 66.6666666667% { -webkit-clip-path: inset(32px 0 3px 0); clip-path: inset(32px 0 3px 0); } 70% { -webkit-clip-path: inset(44px 0 40px 0); clip-path: inset(44px 0 40px 0); } 73.3333333333% { -webkit-clip-path: inset(48px 0 50px 0); clip-path: inset(48px 0 50px 0); } 76.6666666667% { -webkit-clip-path: inset(89px 0 5px 0); clip-path: inset(89px 0 5px 0); } 80% { -webkit-clip-path: inset(24px 0 21px 0); clip-path: inset(24px 0 21px 0); } 83.3333333333% { -webkit-clip-path: inset(97px 0 2px 0); clip-path: inset(97px 0 2px 0); } 86.6666666667% { -webkit-clip-path: inset(93px 0 7px 0); clip-path: inset(93px 0 7px 0); } 90% { -webkit-clip-path: inset(68px 0 17px 0); clip-path: inset(68px 0 17px 0); } 93.3333333333% { -webkit-clip-path: inset(43px 0 19px 0); clip-path: inset(43px 0 19px 0); } 96.6666666667% { -webkit-clip-path: inset(93px 0 1px 0); clip-path: inset(93px 0 1px 0); } 100% { -webkit-clip-path: inset(19px 0 26px 0); clip-path: inset(19px 0 26px 0); } } .scanlines { overflow: hidden; mix-blend-mode: difference; } .scanlines::before { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: repeating-linear-gradient(to bottom, transparent 0%, rgba(255, 255, 255, 0.05) 0.5%, transparent 1%); -webkit-animation: fudge 7s ease-in-out alternate infinite; animation: fudge 7s ease-in-out alternate infinite; } @-webkit-keyframes fudge { from { transform: translate(0px, 0px); } to { transform: translate(0px, 2%); } } @keyframes fudge { from { transform: translate(0px, 0px); } to { transform: translate(0px, 2%); } } .glow { text-shadow: 0 0 1000px #dfbfbf; color: transparent; position: absolute; top: 0; }