Typewriter & delete effect? TypeIt or something similar

On 6/17/2021 at 2:39 AM, tuanphan said:

Add this to Design > Custom CSS

/* Typewriter height */
.typewriter {
    height: 50px !important;
}

 

@tuanphan
When I test my website with seobility it says I no longer have an H1 title. Because I inserted this code does it not count as an H1 title ? Can that be fixed with code? Or do I specifically need to put a H1 title text and the code underneath? 
 

kindly, 

website URL: https://ricardomusicstudio.com

On 6/22/2021 at 11:37 PM, RicardoRMS said:

@tuanphan
When I test my website with seobility it says I no longer have an H1 title. Because I inserted this code does it not count as an H1 title ? Can that be fixed with code? Or do I specifically need to put a H1 title text and the code underneath? 
 

kindly, 

website URL: https://ricardomusicstudio.com

That strange. Can you share link to result page on seobility?

On 6/23/2021 at 8:39 PM, tuanphan said:

That strange. Can you share link to result page on seobility?

https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2Ffilmography&crawltype=1 

@tuanphan is there any to resolve the missing H1 heading issue? 

Link to website all pages have this issue: https://ricardomusicstudio.com 

Seobility link again: https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2Ffilmography&crawltype=1 

Can anyone help with this? 

@tuanphan

@RicardoRMS

I suggest first. Change the h1 in the code block from...

<h1>
    <span class="txt-type" data-wait="3000" data-words='["Composer.", "Producer.", "Sound Designer."]'></span>
  </h1>

...to...

<h1>

  <span class="txt-type" data-wait="3000" data-words="[ 'Composer.', 'Producer.', 'Sound Designer.' ]">
  
    Composer, Producer, and Sound Designer.
    
    </span>
    
  </h1>

My guess is when seobility is reading the site the h1 appears empty as it has no text when read. Here we give it some default text to read. Now I don't know if this will actually fix the issue or what the side effects of doing this will be. Let's see where it takes us.

Let us know how it goes.

@creedon tried breaks the effect but I appreciate the help truly. 🥰

Can you describe how the effect breaks? Is it showing the text I suggested adding being shown and then erased?

13 hours ago, RicardoRMS said:

@creedon tried breaks the effect but I appreciate the help truly. 🥰

Hi dear @RicardoRMS,

Did you check this with Ninja kit?

Best,

Leopold

@creedon it displays the text and messes up the code. @tuanphan any solution? 

On 7/11/2021 at 5:30 PM, RicardoRMS said:

@creedon it displays the text and messes up the code. @tuanphan any solution? 

Do you still need help?

18 hours ago, tuanphan said:

Do you still need help?

 

Yes still no H1 headings seen by seobility: https://freetools.seobility.net/en/seocheck/check?url=https%3A%2F%2Fricardomusicstudio.com%2F&crawltype=1 

URL: https://ricardomusicstudio.com 

I tried everything to adjust it and still no H1 read. @tuanphan

Quote

On 8/5/2020 at 10: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

 

Hello; this is working great on my website. Is it possible to have this running twice on the same page? Seems to fail on the second one.

On 8/21/2021 at 10:51 AM, niccosays said:

 

Hello; this is working great on my website. Is it possible to have this running twice on the same page? Seems to fail on the second one.

Can you share link to paeg where you added the code?

On 8/6/2020 at 1: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

Hi, thank you for the code! Is it possible to ass some code to make the typing text in a different color or underline?

20 hours ago, Kate_F said:

 

Hi, thank you for the code! Is it possible to ass some code to make the typing text in a different color or underline?

Add to Design > Custom CSS

.txt-type {color: red !important;}

I just can't get this to work for me. 
I feel like i've tried everything but not sure where to add the code etc as no success. 

Please help this is driving me mad!

https://www.moonlitdesign.uk/photography

i want STAND OUT WITH to remain static, and then portraits, stock imagery, in-action shots, to change in the type writer effect. 

@moonlitdesign

It appears to working after a fashion to me.

hey thanks for checking that out for me!!! 

it does work to an extent, i tried a few things, but the margins of the text is cutting the italics off, and i cant get it centered for the life of me! 

any tips on improving the code would be amazing.  in the end i went with this code: 

https://dev.to/afif/a-scalable-css-only-typewriter-effect-2opn

8 hours ago, daniellemoonlit said:

any tips on improving the code would be amazing.

I can help with some of the issues.

First remove the opening and closing left tags. They aren't doing anything.

Change the opening h1 tag to the following.

<h1 class="preSlide slideIn" style="transition-timing-function : ease; transition-duration : 0.8s; transition-delay : 0.321951s; margin : auto; text-align : center;">

I added margin and text-align properties.

To the .type span span ruleset in Design > Custom CSS add the following property/value pair.

  margin : auto;

The above is centering elements.

As to the text getting cut off I don't have a solution at this time. You could increase the height property on the .type > span ruleset but instead of cutting off the text at the bottom you would begin to see the tops of the other lines.

Let us know how it goes.

On 9/8/2021 at 8:24 PM, tuanphan said:

Add to Design > Custom CSS

.txt-type {color: red !important;}

 

Hi Tuan!!

This code has worked so great for me, thanks so much. Just having trouble changing the color of my animated text. I added the line of code you suggested and it still defaults to black. Any suggestions? Thanks in advance!

On 2/17/2022 at 10:40 AM, hj1031 said:

Hi Tuan!!

This code has worked so great for me, thanks so much. Just having trouble changing the color of my animated text. I added the line of code you suggested and it still defaults to black. Any suggestions? Thanks in advance!

Can you share link to page where you added Code Block? We will check it again

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

Hi @tuanphan I've used this with some success on my landing page however a couple things are happening.

- the text and background color are affecting every other section of my page.. is there a way to avoid this?

- the script is leaving little dots when text is deleted and typing on mobile.. image attached.

www.studiohms.com

PW: comingsoon

On 2/26/2022 at 1:35 AM, hecinthecity said:

Hi @tuanphan I've used this with some success on my landing page however a couple things are happening.

- the text and background color are affecting every other section of my page.. is there a way to avoid this?

- the script is leaving little dots when text is deleted and typing on mobile.. image attached.

www.studiohms.com

PW: comingsoon

Try this new code

<div class="tcontainer">
  <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 */
.tcontainer {
  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);
  }
}
</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>

17 hours ago, tuanphan said:

Try this new code

<div class="tcontainer">
  <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 */
.tcontainer {
  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);
  }
}
</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>

 

Thanks @tuanphan , it helped with the text color issue but the dots are still happening on mobile after the second and third text lines get deleted.. any ideas on why? Is it to do with the length of my copy maybe? Thanks, as always, for your help!

studiohms.com

PW: comingsoon