Typewriter & delete effect? TypeIt or something similar

SheriM · April 3

Hello!

I'd like to install a typewriter effect on my website like the one you'll find on this site: https://www.januarymade.co.nz/ (also a sqs site, so I know it can be done).

I'm struggling to find something that'll work, everything I come across seems to require javascript, CSS & HTML (all three) but I don't know how to get that to work on sqs... I'm a relative novice to this so any help would be appreciated!

Thank you 🙂

tuanphan · April 4

Add to Code Block

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script>
$('#ssforum).typeIt({
     strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."],
     speed: 150,
     breakLines: false,
     autoStart: false,
  loop: true,
  startDelay: 250,
  loopDelay: 750,
  startDelete: false,
});
</script>
<h1 id="ssforum" class="type2">
  <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i>
  <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span>
  <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span>
</h1>

Edited April 4 by tuanphan
add jquery & typeIT library

cterra13 · June 18

On 4/4/2020 at 12:45 AM, tuanphan said:

Add to Code Block


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.typeit/4.4.0/typeit.min.js"></script>
<script>
$('#ssforum).typeIt({
     strings: ["Small businesses.","Entrepreneurs.","Go-getters." ,"Visionaries." ,"Creatives."],
     speed: 150,
     breakLines: false,
     autoStart: false,
  loop: true,
  startDelay: 250,
  loopDelay: 750,
  startDelete: false,
});
</script>
<h1 id="ssforum" class="type2">
  <i class="ti-placeholder" style="display:inline-block;width:0;line-height:0;overflow:hidden;">.</i>
  <span style="display:inline;position:relative;font:inherit;color:inherit;" class="ti-container">Small businesses</span>
  <span style="display: inline; position: relative; font: inherit; color: inherit; opacity: 0.993343;" class="ti-cursor">|</span>
</h1>

Hi, has anyone had any luck with this? I want to create a type-and-delete effect too but have had no luck. The above code didn't work for me. 😕

I'm on Brine.

Thanks!

kristianne · July 20

Hi, is there a CSS version for this? On a Personal Plan..

rwp · July 20

31 minutes ago, kristianne said:

Hi, is there a CSS version for this? On a Personal Plan..

Can't be done with just CSS

AlexSantos · July 20

I know I used typed with BetterCandy.pl

If you want the code I can share it.

tuanphan · August 5

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

dnmddy · August 11

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

This broke the full width background on my site and made it fixed, but the the text part works so well...!

Edited August 11 by dnmddy

dnmddy · August 11

15 minutes ago, dnmddy said:

This broke the full width background on my site and made it fixed, but the the text part works so well...!

removing this resolved it

#page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}

Is there a way to change how long it pauses when it finished, before repeating?

Edited August 11 by dnmddy

tuanphan · August 12

edit number 3000

dnmddy · August 12

That seems to change the time after each line, not only the final one.

RyanDejaegher · August 12

@dnmddy Try adjusting this line. All the numbers you're seeing are in milliseconds (500ms = 0.5s) so try setting high to see if it works (3000-4000) should be a good test

      // Pause before start typing
      typeSpeed = 500;

dnmddy · August 12

Thanks @RyanDejaegher for the suggestion. That's not the desired effect either. I'm good with the speed the phrases type out at and the pause between the phrases, what I want to do is increase the pause when all the phrases have been typed out and when the string repeats from the beginning again.

Testing the implementation here: https://pumpkin-fish-ycls.squarespace.com/
pw: notyet

So after the final phrase, "we church", completes, I want there to be a dramatic pause before starting over again with "we pray". I don't have a great understanding of javascript (obviously!) but I can't see where in the code that particular timing is called out.

RyanDejaegher · August 12

Hmm yeah based on what i'm seeing it doesn't appear to have any code that's specific to when it finishes going through all the words, that would require adding some more code to account for when it ends and cycles again

dnmddy · August 12

@tuanphan is that a simple update to the code you would be able to provide? As always, so appreciate your generous help!

PP2020 · August 25

@tuanphan is there any way to change the colour of the text that is animated? I want to keep the static test black and change the colour of the animated text to #f3ca22.

Thanks in advance for your help.

tuanphan · August 25

3 minutes ago, PP2020 said:

@tuanphan is there any way to change the colour of the text that is animated? I want to keep the static test black and change the colour of the animated text to #f3ca22.

Thanks in advance for your help.

Can you share link to page where you inserted typwriter code?

rohantheboat · September 1

On 8/12/2020 at 7:06 AM, dnmddy said:
removing this resolved it
#page .section-background {background: white;}
  #page section * {color: black !important;}
  #page .content {
    width: 100%;
}
Is there a way to change how long it pauses when it finished, before repeating?

The code is amazing, thank you tuanphan.

I'm also having problems with code breaking my full width background. I tried deleting the parts dnmddy suggested but that didn't work. Is there something else I can try? maybe I have placed the code in the wrong way?

tuanphan · September 1

2 hours ago, rohantheboat said:

The code is amazing, thank you tuanphan.

I'm also having problems with code breaking my full width background. I tried deleting the parts dnmddy suggested but that didn't work. Is there something else I can try? maybe I have placed the code in the wrong way?

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

JennieFage · September 2

@tuanphan is there a way we can use this but just so it types one line and doesn't delete just stays on screen?

Also need it to show properly on mobile view.

Thanks,

tuanphan · September 3

11 hours ago, JennieFage said:

@tuanphan is there a way we can use this but just so it types one line and doesn't delete just stays on screen?

Also need it to show properly on mobile view.

Thanks,

Can you describe in detail?

JennieFage · September 3

@tuanphan

Yes of course so on the home page banner I just want the typewriter effect tot type the sentence

When daytime feels like playtime!

Then stay on screen. If we could have a coloured highlight as it types too that would be fab. Link to site below.

https://bassoon-bamboo-bnmy.squarespace.com

Password - Paw

martelil · September 26

Thanks for a great code @tuanphan, the animation is beautiful! However, I also have trouble with it breaking the full width of the background image, and deleting part of the code only prevents the code from interfering with the text color.

Any clues is appreciated!

IXStudio · September 26

Hi @Wanderdoll @JennieFage
You can try this Typewriter extension. Check this demo page.

Install from here.

Do this installation guide.

Please use the like button if it helps you!

Best,
Leopold

Edited October 11 by IXStudio

tuanphan · September 27

8 hours ago, martelil said:

Thanks for a great code @tuanphan, the animation is beautiful! However, I also have trouble with it breaking the full width of the background image, and deleting part of the code only prevents the code from interfering with the text color.

Any clues is appreciated!

Can you share link to page where you inserted typewriter

martelil · September 27

On 9/27/2020 at 5:16 AM, tuanphan said:

Can you share link to page where you inserted typewriter

Thanks!

https://grape-bobcat-8kb2.squarespace.com/config/pages

PW trial

Also, is there a snippet for varying the font weight in the sentence?

Edited September 28 by martelil

Typewriter & delete effect? TypeIt or something similar

Question

Link to post

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

31 answers to this question

Recommended Posts

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Link to post

Create an account or sign in to comment

Support

Community

Developers

Resources