How to create glitch effect using jQuery?
The jquery-glitch is a simple plug-in for creating the glitch effect on text in your web pages. You may apply the glitch effect on text for different elements like headings, paragraphs or even smaller text in a span tag.
The colors of the glitch effect can also be customized by using the available options in the plug-in, as shown in the demo below.
Setting up the plug-in
The process of setting up this plug-in is quite simple. After downloading the plug-in, get the jquery-glitch.js and jquery-glitch.css files and place in your project directory.
Place the CSS file in the <head> section while JS file after the jQuery library before the <body> closing tag (for better performance).
<link href=”css/glitch/jquery-glitch.css” rel=”stylesheet”>
Refer the glitch class in the element like div tag where you want to create the glitch effect. For example:
layers: [“yellow”, “blue”],
offset: [15, 10],
See a working demo online below.
A demo of creating glitch effect
In this example of showing the glitch effect, a heading and a paragraph of a text are created inside the div element. Two colors are given in the jQuery code and offset value is set by using the layers and offset options of the plug-in. Have a look:
The markup of the demo:
<h1>A heading with Glitch</h1>
<p>A paragraph of text with glitch effect by using the jquery-glitch plug-in. A paragraph of text with glitch effect by using the jquery-glitch plug-in. </p>
layers: ["#FFFF11", "#408080"],
offset: [20, 10],
Get the complete code from the demo page.