How we can create a glitch effect using HTML & CSS? Solution: HTML CSS Glitch Effect With JavaScript, Glitch Text On Hover.
I am sure that, You know what is glitch effect. Mostly these types of effect used in graphic designing, but some websites also use this. This is a pretty good effect to put on website’s banner. And you can also use it as a heading text, or some important lines you want to highlight.
Creating a glitch effect in designing software is easy, But how we can create a glitch effect on the website? Today I am giving this problem’s solution. So, Today I am sharing HTML CSS Glitch Effect with JavaScript. In other words, Glitch text on hover effect. This program is built-in HTML, CSS, and jQuery, as you know jQuery is a JavaScript library that’s why I am putting this on JavaScript’s category.
This program is mostly is based on CSS, but JavaScript also playing an important role. The whole concept is about that move different color of text together. When 2 or 3 colors text will move randomly, then the glitch effect appears. A CSS property called animation: reverse both infinite; is a major thing to creating this effect.
If you are thinking now how this program looks like. Then see the preview given below.
Preview Of Glitch Text On Hover
See this video preview to getting an idea about how this program actually is.
Now you can see this program visually. If you like this, then get the source code of its.
You May Also Like:
- HTML CSS JavaScript Calendar
- Animated CSS Text Mask With GIF
- Animated Image Reveal In Pure CSS
- JavaScript Random Color Generator
HTML CSS Glitch Effect Source Code
Before sharing source code, let’s talk about this program. As you know I used jQuery to create this program. Basically, jQuery handles the whole program. In other words, jQuery in this program works as a controller. For creating this HTML CSS Glitch Effect With JavaScript, I mostly used CSS property. CSS @keyframe property is a major part of this program.
& I also used CSS animation: property. In animation, I used a value called cubic-bezier (get info). A jQuery’s is part in this program is activate whole CSS property on hover.
For creating this program you have to create 3 files. First for HTML, second for CSS, and third for JavaScript. Follow the steps to create this program without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>HTML CSS Text-Glitch Effect | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="textglitch"> <a class="textglitch-link"><span>WEBDEVTRICK</span></a> </div> <div class="textglitch"> <a class="textglitch-link"><span>HTML CSS JS TEXT-GLITCH</span></a> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ @import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700,300); * { margin:0; padding:0; outline:none; list-style:none; text-decoration:none; box-sizing:border-box; color:#000; background: transparent; border:none; } html, body { height: 100%; width: 100%; margin-top: 5%; } body { background: #111; font-family: 'Roboto', sans-serif; } .textglitch { position: relative; text-align: center; margin: 0 auto; cursor: pointer; z-index: 1; font-size: 5vw; font-weight: 700; margin: 50px 0; } .textglitch .textglitch-link { position: relative; display: inline-block; } .textglitch-link span { position: relative; z-index: 2; color: #fff; } .blur { filter: blur(1px); -webkit-filter: blur(1px); } .textglitch .textglitch-link:after, .textglitch .textglitch-link:before { position: absolute; top: 0px; left: 0px; content: attr(data-content); visibility: hidden; } .textglitch.active .textglitch-link:after, .textglitch.active .textglitch-link:before { visibility: visible; } .textglitch .textglitch-link:before { color: rgba(255, 0, 188, 0.8); -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite; animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) both infinite; } .textglitch .textglitch-link:after { color: rgba(0,255,255,0.8); -webkit-animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite; animation: textglitch .3s cubic-bezier(.25, .46, .45, .94) reverse both infinite; } @keyframes textglitch { 0% { -webkit-transform: translate(0); transform: translate(0) } 20% { -webkit-transform: translate(-3px, 3px); transform: translate(-3px, 3px) } 40% { -webkit-transform: translate(-3px, -3px); transform: translate(-3px, -3px) } 60% { -webkit-transform: translate(3px, 3px); transform: translate(3px, 3px) } 80% { -webkit-transform: translate(3px, -3px); transform: translate(3px, -3px) } to { -webkit-transform: translate(0); transform: translate(0) } } |
function.js
Now create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 |
/** code by webdevtrick ( https://webdevtrick.com ) **/ $('.textglitch').hover(function(){ var eLtext = $(this).text(), eLchild = $(this).find('.textglitch-link'); console.log(eLchild); eLchild.attr('data-content', eLtext); eLchild.toggleClass('blur'); $(this).toggleClass('active'); }); |
That’s It. Now you have successfully created HTML CSS Glitch Effect With JavaScript or Text glitch effect on hover. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
Really enjoyed your post. It is good styling practice!!!
Thank you very much.
How about you proceed to using SCSS for better looking code?
Thanks for your recommendation I will improve myself.
Instead of listing what you used, it would be more helpful if you explained how the code actually works and not just paste it in the editor.
Thanks for your recommendation, I will improve this issue in the future.