Creating a typewriter text effect for squarespace websites
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
<div class="container">
<H1>
Start Your Sentence
<!-- The words that we want to have typerwriter effect -->
<span class="txt-type" data-wait="3000" data-words='["word", "word", "word"]'></span>
</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>
<script>
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;
}
OPTION 2 (Full Typing Sentence)
Add a code block and insert the following:
<div class="typeit">START TYPING TEXT</div>
Then add the following code to your custom CSS section
.typeit {
overflow: hidden;
font-size: 35px; /* change to any font size you want */
border-right: 2px solid #ffffff; /* change in the keyframe too below */
white-space: nowrap;
margin: 0 auto;
animation:
typeit 3.5s steps(40, end),
right-border .5s step-end infinite;
}
@keyframes typeit {
from { width: 0 }
to { width: 100% }
}
@keyframes right-border {
from, to { border-color: transparent }
50% { border-color: #ffffff; /* change in the css above too */ }
}
Did I help you? Consider buying me a coffee as thanks!
