I'd like a typewriter effect on my site

Hey,

Im trying to get a typewriter effect on a semi-title on my site.
Currently it says "Bewustere werknemer" (meaning; mindful employee)
I'd like to have the typewriter effect only used on the first word:
Going from "Bewustere" werknemer --> "Gelukkigere" werknemer --> "Vitalere" werknemer .

Site: Aanbod Vitaliteitscoaching — Independence Now

Is this a possibility?

Thanks in advance,

Koen

Typewriter like this?

https://pike-finch-n7nb.squarespace.com/typewriter-01?noredirect

pass: abc

@tuanphan 
Yes, exactly like that! 

You can edit page where you want to add it > Add a Code Block > Paste this code

<div class="container">
  <h1>
    <!-- The words that we want to have typerwriter effect -->
    <span class="txt-type" data-wait="3000" data-words='["Bewustere", "Gelukkigere", "Vitalere"]'></span> werknemer
  </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 .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>

@tuanphan wondering if you could help - im trying to get this into one line and the words that are in the typewriter I would like bold and if I could make the font a tad smaller. Wondering if you could help.

16 hours ago, Jkoong said:

@tuanphan wondering if you could help - im trying to get this into one line and the words that are in the typewriter I would like bold and if I could make the font a tad smaller. Wondering if you could help.

Add this code under above code, if it doesn't work, you can share link to page where you added it, I can check easier

<style>
h1:has(.txt-type), .txt-type {
	font-weight: bold;
	white-space: nowrap;
}
</style>

@tuanphan

I've added it but it still isnt working. As well was hoping for the I'm a to be normal font and the typewriter words to be bolded.
the link is the following:
https://www.jameilpujol.com/

I used your previous code for the block code, code injection for header and footer. 
CODE BLOCKER:

<h2><center>
  I'm a <br><span class="typewriter"></span><br>
</center></h2>

<style>
h1:has(.txt-type), .txt-type {
    font-weight: bold;
    white-space: nowrap;
}
</style>

HEADER:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

FOOTER:

<script>
    var typed = new Typed('.typewriter', {
      strings: ['user experience designer.', 'visual thinker.', 'problem solver.', 'curious thinker.', 'data visualizer.', 'user interface designer.', 'brainstormer.'],
      typeSpeed: 120,
      loop: true

});
</script>

On 7/20/2024 at 11:03 PM, Jkoong said:

@tuanphan

I've added it but it still isnt working. As well was hoping for the I'm a to be normal font and the typewriter words to be bolded.
the link is the following:
https://www.jameilpujol.com/

I used your previous code for the block code, code injection for header and footer. 
CODE BLOCKER:

<h2><center>
  I'm a <br><span class="typewriter"></span><br>
</center></h2>

<style>
h1:has(.txt-type), .txt-type {
    font-weight: bold;
    white-space: nowrap;
}
</style>

HEADER:

<script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>

 

 

FOOTER:

 

<script>
    var typed = new Typed('.typewriter', {
      strings: ['user experience designer.', 'visual thinker.', 'problem solver.', 'curious thinker.', 'data visualizer.', 'user interface designer.', 'brainstormer.'],
      typeSpeed: 120,
      loop: true

});
</script>

Use this code to Header

<style>
  .typewriter {
	font-weight: bold !important;
	white-space: nowrap;
}
</style>

@tuanphan

The bold works now! 

Unfortunately the no wrap is not working.. 

On 7/26/2024 at 12:41 AM, Jkoong said:

@tuanphan

 

The bold works now! 

Unfortunately the no wrap is not working.. 

I see nowrap fine here. Can you take a screenshot of problem?