Interactive Glitch/Noise Effects – glitch.js

Category: Animation , Javascript , Recommended | May 11, 2020
Author: lilibetqq
Views Total: 628 views
Official Page: Go to website
Last Update: May 11, 2020
License: MIT

Preview:

Interactive Glitch/Noise Effects – glitch.js

Description:

glitch.js is a javascript library that applies interactive glitch & nose effects to images, backgrounds, and text.

Easy to customizable via data attribute. Also works with the HTML5 canvas element.

Glitch Effects Included:

  • vhs-effect
  • twitch-effect
  • crash-effect
  • split-effect

How to use it:

1. Load the minified version of the glitch.js library in the HTML page.

<link rel="stylesheet" href="./dist/css/styles.css" />
<script src="./dist/js/styles.min.js"></script>

2. Apply a hover-triggered glitch effect of your choice to your text and determine the interference intensity using the following CSS classes:

  • hard
  • medium
  • few
<div class="glitch text hover vhs-effect hard" data-text="CSSScript.Com">
  CSSScript.Com
</div>

<div class="glitch text hover twitch-effect medium" data-text="CSSScript.Com">
  CSSScript.Com
</div>

<div class="glitch text hover crash-effect few" data-text="CSSScript.Com">
  CSSScript.Com
</div>

3. You can also create a glitch effect on an HTML5 canvas element:

<canvas class="glitch text split-effect hover few"
        data-text="hello world hello world hello world"
        data-font="120px"
        data-color="#ff0000"
        width="900px"
        height="300px"
>
</canvas>

4. Create a noise background.

<div  class="glitch back noise"> </div>

More Previews:

glitch.js Noise Background

Noise Background

glitch.js Split

Split Effect

glitch.js Crash

Crash Effect

glitch.js TWITCH

Twitch Effect

glitch.js VHS

VHS Effect

You Might Be Interested In:


Leave a Reply