Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Changing colors of specific words in animated text?


Ragqueen

Question

Hello!

I recently came across the typewriter delete effect, courtesy of @taunphan. What I'm trying to do is changing the colors of the three different elements of the code. So for this example I would like "type" to be white, "writer01" to be of a certain hexcode. And then I would like to also change the color of the data-words according to a hexcode.

Main components of what I wish to change:

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

 

Entire code:

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

Any ideas?

 

Source: https://forum.squarespace.com/topic/159551-typewriter-delete-effect-typeit-or-something-similar/#comment-387144

Link to comment
  • Answers 8
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

8 answers to this question

Recommended Posts

  • 0
7 hours ago, Ragqueen said:

Of course! Here you go: https://broccoli-groundhog-yerb.squarespace.com/config/?frameUrl=%2F
Password is: yolo

 

Thanks!

Hi/ Config is admin url. See how to find page url

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/14/2021 at 8:51 PM, Ragqueen said:

My bad. Here you go, you should be able to access through this one, tried it in incognito 🙂 https://broccoli-groundhog-yerb.squarespace.com/home

What is password?

image.thumb.png.f9846589419c2d07ff8d48b71dd3c891.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 5/16/2021 at 5:47 PM, Ragqueen said:

Same password, still: yolo

Add to Design > Custom CSS

/* Text 1 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Fotografi"] * {
    color: #f0f0f0 !important;
}
/* Text 2 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Film"] * {
    color: green !important;
}
/* Text 3 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Projekt"] * {
    color: rgba(0,0,0,0.5) !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)
On 5/17/2021 at 11:53 AM, tuanphan said:

Add to Design > Custom CSS

/* Text 1 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Fotografi"] * {
    color: #f0f0f0 !important;
}
/* Text 2 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Film"] * {
    color: green !important;
}
/* Text 3 */
div#block-yui_3_17_2_1_1620812962572_3101 span[data-words*="Projekt"] * {
    color: rgba(0,0,0,0.5) !important;
}

 

@tuanphanTwo things:

 

(1) I'm trying to implement this for animated text on my site, but the effect is that it changes all the words to one color.  I need each word to be it's own, separate color.

(2) I'd like the animation to play only one time (i.e., I do not want it to loop at all).  Not sure where to add this in the code block to implement.

 

Here's the site (it's just a sample site I'm using for now):  https://orb-platinum-kx6m.squarespace.com

Edited by nazaninp
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...