Glitch - Text FX Animation for Headings and Links

Glitch is a cool subtle animated text effect that fluctuates random characters in to view in headings once a web page loads up or on mouseover on links to create a futuristic data glitch effect. Glitch is now free to download and use, as long as any credits remain to me the author; Mark Hawkins.

Glitch - for headings

Glitch for headings uses the Fisher-Yates Shuffle algorithm to produce randomizing of subtracted numbers from a total to create this appearing effect. Glitch uses these random characters a-z, 0-9 and (+=@#$*") and returns back to its original character before randomizing the remaining characters into view. You can refresh this page to see the effect again below.

Design Services

Instructions


  // glitch_speed should be between 300-1000, a higher number then 1000(a second) won't work properly since it's to slow.
  
  $('.heading-example').glitch({
	glitch_speed: 600
});
	
DOWNLOAD: Glitch.zip

Glitch - for links

Glitch was originally designed for headings, but I decided to create a version for links as well. Unlike Glitch for headings, this version for links continueously randomizes visible charachters while your mouse pointer is over the link. Glitch for links is obviously only supported for desktops or any device using a mouse.

NOTE: Glitch for links only works with text wrapped by an anchor(a) tag with no other html elements nested within or it won't work. Example having a bold em or span tag within the anchor will not work. Glitch for links is minified and does not include the source file, sorry.

Instructions


  // glitch_speed should be between 300-1000, a higher number then 1000(a second) won't work properly since it's to slow.
   
    $('.site-nav a').glitch({
	   glitch_speed: 600
    });
	
DOWNLOAD: Glitch-for-Links.zip