daangqueenie

Oh amazing!! It works perfectly! Thank you so much @bangank36.

I also realized that the word "wait" on the last line was cut off. Thanks again 🙂

2 minutes ago, bangank36 said:

Wrap your script code inside

<script></script>

Hmm, sorry I'm not much of a coder - where exactly do I put the<script> and </script>? It's a bit hard to see from that screen shot

1 minute ago, bangank36 said:

and password too

Oh I'm so sorry, password is 1234 

Oh I'm so sorry, password is 1234

Hi @bangank36, the url is https://queenie-dang.squarespace.com/ - thanks!

Hi @tuanphan I am using the <br/> tag in the title as well. Can you explain how I can edit the font size of the description to be smaller/different colour?

Hi all!

I'm new to SquareSpace and I'm currently trying to edit the header text on the homepage of my portfolio. Someone else posted a related question and they referred to the animation at the top of this website: https://www.innovativeink.ca/ which is exactly what I'm going for.

I found this animation code: https://codepen.io/arbak/details/MWaqPJK which is perfect! However, after adding in all the HTML, CSS, and Javascript, I still don't see the typing-text animation. All I see is the non-typing text portion (the first half of the sentence). I'd love some advice on what I can do to make this work! This is the entire code here:
 

HTML (Insert into code block on page)

HTML CSS JSResult
<div class="container">
  <h1>
    &samhoud | 
    <!-- 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>



Resources1×0.5×0.25×Rerun

CSS (Insert into Custom CSS)

/* CSS RESET */
* {
  margin: 0;
  padding: 0;
  /* Set background and text color */
  background-color: #424242;
  color: #fff;
  font-family:Helvetica;
  font-weight:normal
    
}

/* ALIGN CONTENT */
.container {
  width: 100vw;
  height: 100vh;
  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);
  }
}

JavaScript (Insert into Code Injection)

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);
}