Creating a typewriter text effect for squarespace websites

Apr 11

We all love a bit of squarespace tricks and hacks. Here is one that we thought you may like: The typewriter text effect. It’s really easy to install the squarespace typewriter effect css code to your website. Follow our step by step guide below. Feel free to leave us a comment if you found this article useful.

HOW TO INSTALL THE TYPEWRITER TEXT EFFECT

OPTION 1

Insert a code block and paste the below code.

Add your static text replacing ‘start your sentence’

Then change the data-words to your own. You can add more if needed by copying “word”, remember to add a comma in between each word.

Also change the font type H1 to whichever heading style you prefer ie: H2 or H3 or p for body text.

In addition you can also change the colour of the typing font this is in the code below under: CHANGE ‘TYPING’ FONT COLOUR

<H1>

Start Your Sentence

</H1>

</div>

<style>

/* CSS RESET */

/* ALIGN CONTENT */

.container {

display: flex;

/* Remove horizontal 'justify-content' center if you want the base text not to move */

justify-content: center;

align-items: center;

}

/* ADD CURSOR */

.txt-type > .txt {

border-right: 0.08rem solid #fff;

padding-right: 2px;

/* Animating the cursor */

animation: blink 0.6s infinite;

}

/*CHANGE ‘TYPING’ FONT COLOUR*/

.txt-type {color: #A93E3D; }

/* ANIMATION */

@keyframes blink {

0% {

border-right: 0.08rem solid rgba(255, 255, 255, 1);

}

100% {

border-right: 0.08rem solid rgba(255, 255, 255, 0.2);

}

#page .section-background {background: white;}

#page section * {color: black !important;}

#page .content {

width: 100%;

}

</style>

class TypeWriter {

constructor(txtElement, words, wait = 3000) {

this.txtElement = txtElement;

this.words = words;

this.txt = "";

this.wordIndex = 0;

this.wait = parseInt(wait, 10);

this.type();

this.isDeleting = false;

}

type() {

// Current index of word

const current = this.wordIndex % this.words.length;

// Get full text of current word

const fullTxt = this.words[current];

// Check if deleting

if (this.isDeleting) {

// Remove characters

this.txt = fullTxt.substring(0, this.txt.length - 1);

} else {

// Add charaters

this.txt = fullTxt.substring(0, this.txt.length + 1);

}

// Insert txt into element

this.txtElement.innerHTML = `<span class="txt">${this.txt}</span>`;

// Initial Type Speed

let typeSpeed = 50;

if (this.isDeleting) {

// Increase speed by half when deleting

typeSpeed /= 2;

}

// If word is complete

if (!this.isDeleting && this.txt === fullTxt) {

// Make pause at end

typeSpeed = this.wait;

// Set delete to true

this.isDeleting = true;

} else if (this.isDeleting && this.txt === "") {

this.isDeleting = false;

// Move to next word

this.wordIndex++;

// Pause before start typing

typeSpeed = 500;

}

setTimeout(() => this.type(), typeSpeed);

}

// Init On DOM Load

document.addEventListener("DOMContentLoaded", init);

// Init App

function init() {

const txtElement = document.querySelector(".txt-type");

const words = JSON.parse(txtElement.getAttribute("data-words"));

const wait = txtElement.getAttribute("data-wait");

// Init TypeWriter

new TypeWriter(txtElement, words, wait);

}

</script>

*Update: If you run into any issues with section page padding on 7.1 sites try the below…

REMOVE THIS FROM THE CODE BLOCK (above):

/* ALIGN CONTENT */

.container { display: flex; /* Remove horizontal 'justify-content' center if you want the base text not to move */ justify-content: center; align-items: center; }

ADD THIS TO CUSTOM CSS WITH YOUR BLOCK AND SECTION I.D'S

#yourblockid h1 { margin: auto; width: fit-content; padding: 15px; text-align: center;

/* Adjust Page padding */

section[data-section-id="yoursectionid"]

{height: 100vh;

width: 100vw;

display: flex;

justify-content: center;

align-items: center;

}