Matrix Heading

MatrixHeadings.gif

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:

  1. Change #fafafa to match your site's content background colour and #fecb2f to your desired bar colour.

  2. To change the thickness (height) of your progress bar, replace 4px with the required amount. All 'height' and 'margin-top' values must be exactly the same.

<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.shuffleLettersHeading=function(t){var e=$.extend({step:3,fps:20,text:""},t);return this.each(function(){var t=$(this),r="";r=e.text?e.text.split(""):t.text().split("");for(var n=[],a=[],s=0;s<r.length;s++){var i=r[s];" "!=i?(/[a-z]/.test(i)?n[s]="lowerLetter":/[A-Z]/.test(i)?n[s]="upperLetter":n[s]="symbol",a.push(s)):n[s]="space"}t.html(""),function s(i){var f,h=a.length,o=r.slice(0);if(!(i>h)){for(f=Math.max(i,0);f<h;f++)f<i+e.step?o[a[f]]=randomChar(n[a[f]]):o[a[f]]="";t.text(o.join("")),setTimeout(function(){s(i+1)},1e3/e.fps)}}(-e.step)})},$(function(){$("matrixText h1").shuffleLettersHeading(),$("matrixText h2").shuffleLettersHeading(),$("matrixText h3").shuffleLettersHeading()});</script>

Site wide Code Injection:

sitewide-1.png
sitewide-2.png
sitewide-3.png

Individual Page Header Code Injection:

download.png
header-2.png
header-3.png
header-4.png

Step 2: Insert text using Markdown Blocks

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

Heading 1

<matrixText><h1>YOUR HEADING TEXT GOES HERE</h1></matrixText>

Heading 2

<matrixText><h2>YOUR HEADING TEXT GOES HERE</h2></matrixText>

Heading 3

<matrixText><h3>YOUR HEADING TEXT GOES HERE</h3></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. 

Heading 1

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

OR

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

Heading 2

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

OR

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

Heading 3

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

OR

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

 

Step 4: 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.

Noughts & Ones