MatrixHeadings.gif

Matrix Headings

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

 

Individual Page Header Code Injection:

 

 

Step 2: Insert headings using Markdown Blocks

Insert your heading text into 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>
 
Screen Shot 2017-10-12 at 17.27.22.png
 
 

Step 3: Set text alignment


If you're happy with standard left aligned text then go right ahead and click 'Apply'!

However, if you want your Matrix Headings 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>
 

⚡️ 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.