MatrixText.gif

Matrix Text

Our Matrix Text plugin allow you to add a randomised, jumble effect to any section of body text on your Squarespace site. Below you will find a super-simple tutorial that will guide you through the installation and setup of this plugin.

 

 

Step 1: Insert the JavaScript

Insert the following code into the site wide 'Header Code Injection' area or the 'Page Header Code Injection' area to implement this plugin on individual page(s) - more info below.

Copy & paste this code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>function randomChar(t){var e="";"lowerLetter"==t?e="abcdefghijklmnopqrstuvwxyz0123456789":"upperLetter"==t?e="ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789":"symbol"==t&&(e=",.?/\\(^)![]{}*&^%$#'\"");var r=e.split("");return r[Math.floor(Math.random()*r.length)]}$.fn.shuffleLettersBody=function(t){var e=$.extend({step:7,fps:90,text:""},t);return this.each(function(){var t=$(this),r="";r=e.text?e.text.split(""):t.text().split("");for(var n=[],s=[],o=0;o<r.length;o++){var a=r[o];" "!=a?(/[a-z]/.test(a)?n[o]="lowerLetter":/[A-Z]/.test(a)?n[o]="upperLetter":n[o]="symbol",s.push(o)):n[o]="space"}t.html(""),function o(a){var f,i=s.length,h=r.slice(0);if(!(a>i)){for(f=Math.max(a,0);f<i;f++)f<a+e.step?h[s[f]]=randomChar(n[s[f]]):h[s[f]]="";t.text(h.join("")),setTimeout(function(){o(a+1)},1e3/e.fps)}}(-e.step)})},$(function(){$("matrixText p").shuffleLettersBody()});</script>
 

Site wide Code Injection:

 

Individual Page Header Code Injection:

 

 

Step 2: Insert text using Markdown Blocks

Insert your heading text in to a Markdown Block using the following format:
 

<matrixText><p>YOUR TEXT GOES HERE</p></matrixText>
 
 
 

 

Step 3: Set text alignment

If you're happy with left aligned text then go right ahead and click 'Apply'. However, if you want your Matrix Text to be centred or right-aligned, include the following style classes in your Markdown Text block. 
 

<matrixText style="text-align:center"><p>YOUR TEXT GOES HERE</p></matrixText>

OR

<matrixText style="text-align:right"><p>YOUR TEXT GOES HERE</p></matrixText>
 

⚡️ Apply, Save & Refresh! ⚡️

 

Need some help?

If you need help installing your plugin or you find that the code provided is not working - please feel free to contact us by clicking the link below.