electronics, linux, music, ...


Glitch jQuery plugin

Glitch is a jQuery plugin for creating glitchy effects on text. It can be seen on many elements of this site (title, menu, headings, links). Plugin works by duplicating the target element and then changing its width/height/top/left to create glitchy effect. It is released under MIT licence.

Download it here.

Instructions

Being a jQuery plugin, this plugin requires jQuery. Other than that it should be included in page header. To use it, call function glitch() on target jQuery object.

<html>
  <head>
    <title>glitch example</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <script src="glitch.jquery.js"></script>
    <script type="text/javascript">
      $(function(){
        $('span.block').glitch();
      });
    </script>
  </head>
  <body>
    <span class="block">Glitch me</span>
  </body>
</html>

Options

Glitch plugin can be controlled with few initialization options:

* bg  - (optional) background color
* maxint - max interval between glitchings (default 20)
* minint  - min interval between glitchings (default 2)
* maxglitch - max number of twitches (default 5)
* hshift - max horizontal shift in pixels (default 3)
* vshift - max vertical shift in pixels (default 3)
* direction - slicing direction - 'horizontal', 'vertical' or 'random' (default is horizontal)

Comments (0)

Add new comment
  • (will not be published)
  • Security check

    Please insert the result of the arithmetical operation from the following image:

    Please insert the result of the arithmetical operation from this image. =