Add an awesome glitch effect to your webpage elements
Time to get g-l-i-t-c-h-y!
I, (with not-so-super web development knowledge), welcome you all to the world of g-l-i-t-c-h-e-s. Hah, I thought writing glitches like that would be cool, but sadly, it isn’t…Anyway, we all have seen glitches in our earlier television sets, right? Now, (for no reason), let’s re-create that effect in our computers! Exciting? Let’s dive in!
What will I make?
This:
Not this:
How will I achieve this❔
Library! I’ll be using the mgGlitch library by hmongouachon. This is used to add the glitch effect to almost any of the element(s) you want to. There are three simple steps to achieve this:
- Select the element which you want to glitch, like the image (
<img>). - Add the jQuery library to the source.
- Initiate the plugin with really easy code. See the demo.
Okay, I won’t go into what to write and what not to. This section is just for an overview of the library. Feel free to contribute by opening a pull request or by creating an issue. Let’s move on now.
Oh wait! There is a live example by the mgGlitch developer on CodePen. See this:
What will I need? 🛠️
- H̸a̸m̸m̸e̸r̸ ̸a̸n̸d̸ ̸w̸r̸e̸n̸c̸h̸
- Your already wonderful HTML, CSS and jQuery skills.
- A text editor (I’ll be using VS Code just because for my last tutorial on CSS Snap Scrolling, I used it)
- mgGlitch’s JS file. Get it here.
Shall we, glitchy-glitch?
We need a jQuery CDN. Grab the uncompressed one (which I’ve used). Add it to the <script> tag to your HTML page which will have the following elements:
- Another
<script>to add themgGlitch.min.jsfile assrc. Make sure you add that JS file in your project folder. - In the
<body>add acontainer classhaving aglitch-img class. This innerclasswill have itssrcset to theglitch-image.jpgwhich I got from Pexel. Also, you can add a<h3>header with some text on it…well, it’s completely optional. - For the next step, we will use the
mgGlitchlibrary. Start by declaring a function in jQuery style. Name it asmgGlitchand target our.glitch-img class. This is theclasswe want to glitch. After this, we will add few properties likedestroy,glitch,scale,blend,blendModeType. Feel free to experiment on those. They accept abooleanvalue, but make sure you don’t setglitchtofalse, else that awesome effect won’t work. - We can create more than one glitch effects for the selected element. This is achieved by setting the
glitch1TimeMin,glitch2TimeMinand their correspondingmaxvalues. As described in its documentation:
This plugin will clone the selected element (html or image) 3 times :
first element become a static background
next element with glitch property and lower interval
next element with glitch property, higher interval and scale options
next element with glitch property, higher interval, scale options and blend mode apply
There’s nothing much exciting in the CSS. For the text I’ve used the CF Glitch City font which is available for free via Fontspace. Just note one thing that for the element we want to animate with this effect, it must have position: absolute;. For those who really want to see both the HTML file and the CSS file code, here it is:
Where to next? 🤔
In this I glitched the background image, you can go further by applying the glitch to your favorite elements of your web-page. What about displaying an old commercial video with that glitch effect? It will surely look like we’re watching an old television from 80’s or 90’s! Here are some more resources on this plugin and others:
Liked this story? Feel free to clap and motivate me to write more and better. Did I missed something? Any suggestions? The comment box below serves the exact purpose!
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
