Typewriter & delete effect? TypeIt or something similar

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>

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!

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

31 minutes ago, kristianne said:

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

Can't be done with just CSS

I know I used typed with BetterCandy.pl

If you want the code I can share it.

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

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

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?

edit number 3000

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

@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;

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.

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

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

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

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?

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?

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.

@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, 

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?

@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

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!

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

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

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?