Skip to main content

Glitch Effect On Image | Rustcode

by Rustcode
glitch-image-mgglitchjs-html-css-and-mgglitchjs

"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.


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