Typewriter & delete effect? TypeIt or something similar

Clairem25 · September 5, 2022

On 9/4/2022 at 4:10 AM, creedon said:

It may be possible to do what you want but the code discussed in this thread would not work. The code discussed here is meant to be dropped into a code block which the header does not allow.

Thanks so much for answering!

What if I have a business account that allows for code injection in the header? I'm just having trouble with the basics - ie. getting it to be the right size, align with the imagery and the nav bar, wrap for mobile, etc. all the things the header title text is already set up to do.

srgorms95 · October 3, 2022

On 8/5/2020 at 11:14 AM, tuanphan said:

Just solved for 3 members. Add all to Code Block

<div class="container">
  <h1>
    typewriter01 |
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></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;
}

/* 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>

Notes: Haven't tested with SS 7.0

How do you edit the font and italicize it? Where and how would you insert the code to do this?

tuanphan · October 4, 2022

On 10/3/2022 at 7:53 AM, srgorms95 said:

How do you edit the font and italicize it? Where and how would you insert the code to do this?

Add to bottom of Code Block

span.txt-type {
	font-style: italic;
	color: red;	
	font-size: 30px;
	font-family: monospace;
}

Clairem25 · October 11, 2022

On 8/5/2020 at 11:14 AM, tuanphan said:

Just solved for 3 members. Add all to Code Block

<div class="container">
  <h1>
    typewriter01 |
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></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;
}

/* 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>

Notes: Haven't tested with SS 7.0

Can this be done in the header?

tuanphan · October 15, 2022

On 10/12/2022 at 12:50 AM, Clairem25 said:

Can this be done in the header?

You mean make site title make typewriter, or add the typewriter text in header or? And what is your site url?

DevonHarris · October 27, 2022

hey @tuanphan great code thank you so much!! For some reason my cursor line isn't showing, could you possibly take a look for me please? https://www.breakpointbranding.com/home-3

it's in the second section "Command your clients". Thanks again!

tuanphan · October 31, 2022

On 10/27/2022 at 10:37 PM, DevonHarris said:

hey @tuanphan great code thank you so much!! For some reason my cursor line isn't showing, could you possibly take a look for me please? https://www.breakpointbranding.com/home-3

it's in the second section "Command your clients". Thanks again!

What is password?

DevonHarris · November 1, 2022

On 10/31/2022 at 6:30 AM, tuanphan said:

What is password?

Hey @tuanphan I fixed the issue- it just needed a color change in the style settings. Thank you!!!

jaksdigital · November 11, 2022

hi @tuanphan thank you so much for this!

I have two sections on this page that i am trying to use this affect. (Second section is hidden on desktop and and first section is hidden on mobile)

https://wrasse-mandarin-639p.squarespace.com/

password is 2022

I can't seem to get the second section to work even though it's the same code. Is there something else I have to include? thanks in advanced!

Edited November 11, 2022 by jaksdigital

tuanphan · November 21, 2022

On 11/12/2022 at 3:25 AM, jaksdigital said:

hi @tuanphan thank you so much for this!

I have two sections on this page that i am trying to use this affect. (Second section is hidden on desktop and and first section is hidden on mobile)

https://wrasse-mandarin-639p.squarespace.com/

password is 2022

I can't seem to get the second section to work even though it's the same code. Is there something else I have to include? thanks in advanced!

If you want to apply to 2 Code Blocks on same page, & paste same code, they will conflict together

With second Code Block, use this new code

<div class="container">
  <h1>
    typewriter01 |
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type2" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></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-type2 > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

/* 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);
  }
}
</style>
<script>
class TypeWriter2 {
  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-type2");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  // Init TypeWriter
  new TypeWriter2(txtElement, words, wait);
}

</script>

(I adjusted some IDs)

If it still doesn't work, please send code in both Code Blocks, I will try test it again on my demo site

creedon · November 22, 2022

On 11/11/2022 at 12:25 PM, jaksdigital said:

I have two sections on this page that i am trying to use this affect. (Second section is hidden on desktop and and first section is hidden on mobile)

I can't seem to get the second section to work even though it's the same code.

Please see the following.

The main portion of the referenced code only needs to be installed once.

jaksdigital · November 22, 2022

On 11/21/2022 at 12:14 AM, tuanphan said:

If you want to apply to 2 Code Blocks on same page, & paste same code, they will conflict together

With second Code Block, use this new code

<div class="container">
  <h1>
    typewriter01 |
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type2" data-wait="3000" data-words='["consultancy", "food", "creative tech", "ranj"]'></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-type2 > .txt {
  border-right: 0.08rem solid #fff;
  padding-right: 2px;
  /* Animating the cursor */
  animation: blink 0.6s infinite;
}

/* 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);
  }
}
</style>
<script>
class TypeWriter2 {
  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-type2");
  const words = JSON.parse(txtElement.getAttribute("data-words"));
  const wait = txtElement.getAttribute("data-wait");
  // Init TypeWriter
  new TypeWriter2(txtElement, words, wait);
}

</script>

(I adjusted some IDs)

If it still doesn't work, please send code in both Code Blocks, I will try test it again on my demo site

Thank you so much! That worked 🙂 @tuanphan

February 9, 2023

Is there any way to change the font for each new typed line? I want to have "Welcome" typed out several times with each one being a different font.

D8NMT · February 10, 2023

Similar question to above, but is it possible to change the colour of just one of the typed words?

creedon · February 10, 2023

8 hours ago, D8NMT said:

Similar question to above, but is it possible to change the colour of just one of the typed words?

Let me make sure I understand the effect you desire. Let's say you have the typed words: one, two, three, four, and five. Do you want all the typed words colored or one? For example just the typed word three.

If you use my version of the code earlier in this thread you can do both.

All words.

<style>

  .typewriter-container .txt {
  
    color : red;
    
    }
    
  </style>

Single word.

<style>

  .typewriter-container .txt[data-word="three"] {
  
    color : red;
    
    }
    
  </style>

You can add this CSS after the TypeWriter code.

Let us know how it goes.

Edited February 10, 2023 by creedon

creedon · February 10, 2023

On 2/8/2023 at 5:43 PM, buckbeak0430 said:

Is there any way to change the font for each new typed line?

First can you show us the TypeWriter effect on your site without the font change effect?

Doug_Do · March 24, 2023

Hi @tuanphan:

I used your code and modified it so that the typewriter effect applies to a specific block using an ID selector.

Question for you: is it possible to have this block then inherit the styling from the theme I'm currently using (e.g. have the typed words take on the same font and color and re-sizing etc as another Heading 1 block)?

I don't have any custom CSS and the only change that hasn't been made with the built-in Squarespace options is this typewriter effect.

tuanphan · March 29, 2023

On 3/25/2023 at 2:39 AM, Doug_Do said:

Hi @tuanphan:

I used your code and modified it so that the typewriter effect applies to a specific block using an ID selector.

Question for you: is it possible to have this block then inherit the styling from the theme I'm currently using (e.g. have the typed words take on the same font and color and re-sizing etc as another Heading 1 block)?

I don't have any custom CSS and the only change that hasn't been made with the built-in Squarespace options is this typewriter effect.

If you want it inherit, we will need to add some class name into the code.

Can you share link to page where you added the code? We can check easier

daniellenoakes · December 5, 2023

@tuanphan
Hey, i got this feature to work for me, but i have one issue.

the cursor that blinks is massive, like way too tall, how can i shrink the height of this?!

thanks!

www.annajonesbridal.co.uk/home-new

here's the code i'm using:

<div class="container">
<center> <h1>
CREATING LOOKS FOR</br>
THOSE

<em><span class="txt-type" data-wait="3000" data-words='["special"]'></span>
</em> MOMENTS </h1></center>
</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.03rem solid #fff;
padding-right: 1px;

/* Animating the cursor */
animation: blink 0.6s infinite;
}

/* ANIMATION */
@keyframes blink {
0% {
border-right: 0.08rem solid rgba(0, 0, 0, 1);
}
100% {
border-right: 0.08rem solid rgba(0, 0, 0, 0.2);
}
}

</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>

Edited December 5, 2023 by daniellenoakes
solved one problem

tuanphan · December 7, 2023

On 12/5/2023 at 5:24 PM, daniellenoakes said:

@tuanphan
Hey, i got this feature to work for me, but i have one issue.

the cursor that blinks is massive, like way too tall, how can i shrink the height of this?!

thanks!

www.annajonesbridal.co.uk/home-new

here's the code i'm using:

<div class="container">
<center> <h1>
CREATING LOOKS FOR</br>
THOSE

<em><span class="txt-type" data-wait="3000" data-words='["special"]'></span>
</em> MOMENTS </h1></center>
</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.03rem solid #fff;
padding-right: 1px;

/* Animating the cursor */
animation: blink 0.6s infinite;
}

/* ANIMATION */
@keyframes blink {
0% {
border-right: 0.08rem solid rgba(0, 0, 0, 1);
}
100% {
border-right: 0.08rem solid rgba(0, 0, 0, 0.2);
}
}

</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>

You try adding this to Website Tools (under Not Linked) > Custom CSS

div.code-block h1 em {
    font-size: 20px !important;
}

daniellenoakes · December 7, 2023

17 minutes ago, tuanphan said:
You try adding this to Website Tools (under Not Linked) > Custom CSS
div.code-block h1 em {
    font-size: 20px !important;
}

thanks @tuanphan , but this changes the font size of the word 'special', i want special to stay the same size, and only the cursor to be reduced in size

tuanphan · December 9, 2023

On 12/7/2023 at 8:56 PM, daniellenoakes said:

thanks @tuanphan , but this changes the font size of the word 'special', i want special to stay the same size, and only the cursor to be reduced in size

Remove font-size code I sent

Use this new code

div#block-yui_3_17_2_1_1701770257219_5360 .txt-type > .txt:after{
    content: '';
    animation: blink 0.6s infinite;
    height: 1em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
div#block-yui_3_17_2_1_1701770257219_5360 .txt-type > .txt {
    border: unset !important;
}
div#block-yui_3_17_2_1_1701770257219_5360 span.txt-type {
   position: relative;
}

daniellenoakes · December 9, 2023

13 hours ago, tuanphan said:

Remove font-size code I sent

Use this new code

div#block-yui_3_17_2_1_1701770257219_5360 .txt-type > .txt:after{
    content: '';
    animation: blink 0.6s infinite;
    height: 1em;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
div#block-yui_3_17_2_1_1701770257219_5360 .txt-type > .txt {
    border: unset !important;
}
div#block-yui_3_17_2_1_1701770257219_5360 span.txt-type {
   position: relative;
}

bloody amazing thank you so much!!!

cwestlake · January 20

I found this option that seems to work pretty easily:

CODE BLOCK

<h1>
  Nulla fascilis
  <span class="typed-words"></span>
</h1>

CODE INJECTION SECTION JS (INFINITE LOOPING)

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script>
  var options = {
  strings: ['lorem', 'ipsum dolor', 'magna', 'vitae congue'],
  typeSpeed: 100,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 1000,
  loop: true,
};

  var typed = new Typed('.typed-words', options);
</script>

That's for an infinite loop. If you want it without looping, replace the bottom section with this:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
<script>
  var options = {
  strings: ['lorem', 'ipsum dolor', 'magna', 'vitae congue'],
  typeSpeed: 100,
  backSpeed: 50,
  backDelay: 500,
  startDelay: 1000,
  onComplete() {
    $('.typed-cursor').remove(); //remove this line if you want to KEEP the cursor at the end
  },
};

  var typed = new Typed('.typed-words', options);
</script>

Edited January 20 by cwestlake

LM2021 · March 13

I used this code, but it then changed my section block theme colors any help here?

Typewriter & delete effect? TypeIt or something similar

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan

tuanphan

creedon

Posted Images

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Guest

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

CODE BLOCK

CODE INJECTION SECTION JS (INFINITE LOOPING)

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources