"glitch effect on the image" is the creative effect on the image, where we will use JavaScript libraries that will help us create this effect. There are two types of libraries that we will include in an HTML document. The first one is jquery and the second one is mgGlitchJs.
We will insert the image in the html document. You will find all the necessary links and images further in this article.
RELATED POST:
1. HTML STRUCTURE
<!DOCTYPE html> <html> <head> <title>Glitch Effect On Image | Rustcode</title> </head> <body> main content. </body> </html>
2. mgGlitchSJs PLUGIN
The basic HTML structure is ready for us, now let's include JavaScript
plugins jquery and mgGlitchJs in this HTML document. Download these
plugin-
01. JQuery:
Download
02. mgGlitchJs:
Download
<!DOCTYPE html> <html> <head> <title>Glitch Effect On Image| Rustcode</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/hmongouachon/mgGlitch/src/mgGlitch.min.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> main content. </body> </html>
3. HTML
Here we are using an image to create this effect you can download that image from here.
<body> <div class="container"> <img class="glitch-img" src="image.jpg" alt="image"> </div> </body>
4. CSS
body, html { width: 100%; height: 100%; margin: 0px; } .container { position: relative; width: 100%; height: 100%; overflow: hidden; box-sizing: border-box; } .glitch-img { position: absolute; width: 100%; height: 100%; background-position: center; background-size: cover; }
5. SCRIPT
$(function(){ $(".glitch-img").mgGlitch({ destroy: false, glitch: true, scale: true, blend: true, blendModeType: 'hue', glitch1TimeMin: 200, glitch1TimeMax: 400, glitch2TimeMin: 10, glitch2TimeMax: 100, }); });
6. Youtube Video
Here I am attaching a
YouTube video
from my channel
so that you can understand this article better and you can create a
better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.
7. SOURCE CODE
After reading this article and watching a
YouTube video, if you want to
download source code, you can download from here and change this according
to your need.
RELATED POST:
Comments
Post a Comment