Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

Question

Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

I have a unique text animation that loads when the page loads. The characters will be gradually written to the screen with some words having a gradient effect. While I've managed to successfully apply the gradient, there seems to be a pause when it reaches the span tag before continuing to output each character with the gradient applied.

To see my closest working version of this requirement, check out my CodePen: https://codepen.io/Kelly-Gold/pen/oNPJaYL

In order to demonstrate the issue, I captured screenshots at the beginning and end of the gradient application showing unexpected HTML characters. Once the entire line is output, the result is as desired, but the process isn't smooth and displays unwanted characters along the way.

Text appearance upon arrival at the span tag: https://i.stack.imgur.com/3sW8o.png

Text appearance after completing the gradient and reaching the closing span tag: https://i.stack.imgur.com/17Ica.png

Text appearance at the conclusion of the line: https://i.stack.imgur.com/pf9wv.png

I'm struggling to make the animation fluid without pauses and prevent the display of characters at the beginning and end of the span tag.

Desired functionality:

Output characters one by one per line with a brief pause at the end of each line
Apply gradient effect to specific words
Ensure no pause when reaching a gradient word, allowing for smooth flow like regular black text
Avoid any visible HTML tags during runtime

javascript html css animation gradient

Answer 1

Answer №1

This snippet of code checks if the letterCount is positioned at the beginning of a <span... or </span... tag, and adjusts it accordingly to skip over that tag.

It's not flawless though. One issue is that the html output between the opening and closing span tags doesn't include the closing tag. Additionally, I accidentally messed up the blink effect.

const lines = [
  "This is the first line",
  "This is the second line with a <span class='gradient'>gradient</span> word",
  "This is the last line with a <span class='gradient'>gradient</span> word",
];


let lineCount = 0;
let letterCount = 0;
let currentText = "";
let isCursorBlinking = true;

const textElement1 = document.querySelector(".line1");
const textElement2 = document.querySelector(".line2");
const textElement3 = document.querySelector(".line3");

function type() {
  if (letterCount === lines[lineCount].length) {
    pauseTyping();
    return;
  }

  letterCount++;
  currentText = lines[lineCount];
  
  const startOpenGradient = currentText.indexOf("<span class='gradient'>");
  const endOpenGradient = startOpenGradient + "<span class='gradient'>".length;
  const startCloseGradient = currentText.indexOf("</span>");
  const endCloseGradient = startCloseGradient + "</span>".length;
  
  
  if (letterCount === startOpenGradient)
    letterCount = endOpenGradient;
  else if (letterCount === startCloseGradient)
    letterCount = endCloseGradient;
  
  currentText = lines[lineCount].slice(0, letterCount);

    textElement1.innerHTML = currentText;

  isCursorBlinking = true;
  textElement3.classList.toggle("blink");

  
  
  setTimeout(type, 100);
}

function pauseTyping() {
  setTimeout(() => {
    letterCount = 0;
    lineCount++;

    if (lineCount === lines.length) {
      return;
    }

    type();
  }, 1000);
}

type();

.text-animation {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-top: 50px;
}

h1 {
  display: inline-block;
}

.blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.gradient {
  background: linear-gradient(to right, #FFC107, #FF5733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="text-animation">
  <h1 class="line1"></h1>
  <h1 class="line2"></h1>
  <h1 class="line3"></h1>
</div>

Answer 2

This snippet of code checks if the letterCount is positioned at the beginning of a <span... or </span... tag, and adjusts it accordingly to skip over that tag.

It's not flawless though. One issue is that the html output between the opening and closing span tags doesn't include the closing tag. Additionally, I accidentally messed up the blink effect.

const lines = [
  "This is the first line",
  "This is the second line with a <span class='gradient'>gradient</span> word",
  "This is the last line with a <span class='gradient'>gradient</span> word",
];


let lineCount = 0;
let letterCount = 0;
let currentText = "";
let isCursorBlinking = true;

const textElement1 = document.querySelector(".line1");
const textElement2 = document.querySelector(".line2");
const textElement3 = document.querySelector(".line3");

function type() {
  if (letterCount === lines[lineCount].length) {
    pauseTyping();
    return;
  }

  letterCount++;
  currentText = lines[lineCount];
  
  const startOpenGradient = currentText.indexOf("<span class='gradient'>");
  const endOpenGradient = startOpenGradient + "<span class='gradient'>".length;
  const startCloseGradient = currentText.indexOf("</span>");
  const endCloseGradient = startCloseGradient + "</span>".length;
  
  
  if (letterCount === startOpenGradient)
    letterCount = endOpenGradient;
  else if (letterCount === startCloseGradient)
    letterCount = endCloseGradient;
  
  currentText = lines[lineCount].slice(0, letterCount);

    textElement1.innerHTML = currentText;

  isCursorBlinking = true;
  textElement3.classList.toggle("blink");

  
  
  setTimeout(type, 100);
}

function pauseTyping() {
  setTimeout(() => {
    letterCount = 0;
    lineCount++;

    if (lineCount === lines.length) {
      return;
    }

    type();
  }, 1000);
}

type();

.text-animation {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: center;
  margin-top: 50px;
}

h1 {
  display: inline-block;
}

.blink {
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.gradient {
  background: linear-gradient(to right, #FFC107, #FF5733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<div class="text-animation">
  <h1 class="line1"></h1>
  <h1 class="line2"></h1>
  <h1 class="line3"></h1>
</div>

Answer 3

Answer №2

Thanks to @james for the helpful guidance on handling the span tags within the JS code

const lines = [
  "Greetings, I am <span class='gradient'>Kelly</span>",
  "I enjoy experimenting with <span class='gradient'>new technology</span>, expanding my knowledge, and exploring the outdoors.",
  "Currently working as a <span class='gradient'>Solutions Engineer</span>, bridging app ecosystems through APIs."
];

let lineCount = 0;
let letterCount = 0;
let currentText = "";

const textElements = [
  document.querySelector(".line1"),
  document.querySelector(".line2"),
  document.querySelector(".line3")
];

function type() {
  if (letterCount === 0) {
    // Start blinking cursor when typing begins on a new line
    textElements[lineCount].classList.add('cursor');
  }

  if (letterCount === lines[lineCount].length) {
    // Stop blinking cursor when typing ends on a line
    textElements[lineCount].classList.remove('cursor');
    textElements[lineCount].classList.add('cursor-blink');
    pauseTyping();
    return;
  }

  letterCount++;
  currentText = lines[lineCount];

  const startOpenGradient = currentText.indexOf("<span class='gradient'>");
  const endOpenGradient = startOpenGradient + "<span class='gradient'>".length;
  const startCloseGradient = currentText.indexOf("</span>");
  const endCloseGradient = startCloseGradient + "</span>".length;

  if (letterCount === startOpenGradient)
    letterCount = endOpenGradient;
  else if (letterCount === startCloseGradient)
    letterCount = endCloseGradient;

  currentText = lines[lineCount].slice(0, letterCount);
  textElements[lineCount].innerHTML = currentText;

  setTimeout(type, 100);
}

function pauseTyping() {
  setTimeout(() => {
    textElements[lineCount].classList.remove('cursor-blink');
    letterCount = 0;
    lineCount++;

    if (lineCount === lines.length) {
      // Make the cursor blink indefinitely at the end of the last line
      textElements[lineCount - 1].classList.add('cursor-blink');
      return;
    }

    type();
  }, 2000); // Change to 2000 for a 2-second pause between lines
}

type();

.text-animation {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: left;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.line { /* Add this class to apply margin to each line */
  margin-bottom: 10px; /* Adjust the space between lines */
}

h1 {
  display: inline-block;
}

.gradient {
  background: linear-gradient(to right, #FFC107, #FF5733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 35px;
  background-color: #000;
  margin-left: 3px;
  opacity: 1; /* Change the initial opacity to 0 */
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.no-cursor::after {
  content: none;
}
.cursor-blink::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 35px;
  background-color: #000;
  margin-left: 3px;
  opacity: 0;
  animation: blink 0.75s infinite;
}

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Animation with Blinking Cursor</title>
</head>
<body>
  <div class="text-animation">
    <div class="line">
      <h1 class="line1 text-container cursor"></h1>
    </div>
    <div class="line">
      <h1 class="line2 text-container"></h1>
    </div>
    <div class="line">
      <h1 class="line3 text-container"></h1>
    </div>
  </div>
</body>
</html>

Answer 4

Thanks to @james for the helpful guidance on handling the span tags within the JS code

const lines = [
  "Greetings, I am <span class='gradient'>Kelly</span>",
  "I enjoy experimenting with <span class='gradient'>new technology</span>, expanding my knowledge, and exploring the outdoors.",
  "Currently working as a <span class='gradient'>Solutions Engineer</span>, bridging app ecosystems through APIs."
];

let lineCount = 0;
let letterCount = 0;
let currentText = "";

const textElements = [
  document.querySelector(".line1"),
  document.querySelector(".line2"),
  document.querySelector(".line3")
];

function type() {
  if (letterCount === 0) {
    // Start blinking cursor when typing begins on a new line
    textElements[lineCount].classList.add('cursor');
  }

  if (letterCount === lines[lineCount].length) {
    // Stop blinking cursor when typing ends on a line
    textElements[lineCount].classList.remove('cursor');
    textElements[lineCount].classList.add('cursor-blink');
    pauseTyping();
    return;
  }

  letterCount++;
  currentText = lines[lineCount];

  const startOpenGradient = currentText.indexOf("<span class='gradient'>");
  const endOpenGradient = startOpenGradient + "<span class='gradient'>".length;
  const startCloseGradient = currentText.indexOf("</span>");
  const endCloseGradient = startCloseGradient + "</span>".length;

  if (letterCount === startOpenGradient)
    letterCount = endOpenGradient;
  else if (letterCount === startCloseGradient)
    letterCount = endCloseGradient;

  currentText = lines[lineCount].slice(0, letterCount);
  textElements[lineCount].innerHTML = currentText;

  setTimeout(type, 100);
}

function pauseTyping() {
  setTimeout(() => {
    textElements[lineCount].classList.remove('cursor-blink');
    letterCount = 0;
    lineCount++;

    if (lineCount === lines.length) {
      // Make the cursor blink indefinitely at the end of the last line
      textElements[lineCount - 1].classList.add('cursor-blink');
      return;
    }

    type();
  }, 2000); // Change to 2000 for a 2-second pause between lines
}

type();

.text-animation {
  font-size: 24px;
  font-weight: bold;
  color: #000;
  text-align: left;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
}

.line { /* Add this class to apply margin to each line */
  margin-bottom: 10px; /* Adjust the space between lines */
}

h1 {
  display: inline-block;
}

.gradient {
  background: linear-gradient(to right, #FFC107, #FF5733);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cursor::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 35px;
  background-color: #000;
  margin-left: 3px;
  opacity: 1; /* Change the initial opacity to 0 */
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
.no-cursor::after {
  content: none;
}
.cursor-blink::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 35px;
  background-color: #000;
  margin-left: 3px;
  opacity: 0;
  animation: blink 0.75s infinite;
}

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Typing Animation with Blinking Cursor</title>
</head>
<body>
  <div class="text-animation">
    <div class="line">
      <h1 class="line1 text-container cursor"></h1>
    </div>
    <div class="line">
      <h1 class="line2 text-container"></h1>
    </div>
    <div class="line">
      <h1 class="line3 text-container"></h1>
    </div>
  </div>
</body>
</html>

Add a color gradient to text as it animates without displaying any code tags (HTML, CSS, JS)

Answer №1

Answer №2

Similar questions

Breaking down a intricate JavaScript expression in order to reformat it into a different structure

Enabling communication between my React frontend and Express server

Is there a way to invert the orientation of an object within a canvas?

The issue with IE-9 is that it is mistakenly picking up the placeholder value as

Angular.js encountered an error at line 13550: [ng:areq] The argument 'popCntrl' is expected to be a function, but it was undefined

Disabling the intellisense feature for locale suggestions in Monaco is recommended

Dynamic Component Interactions in VueJS using Mouse Events

Implementing jQuery/JavaScript to efficiently iterate through JSON data

How do popular social media platforms such as Facebook and Twitter utilize real-time APIs to display live updates in news feeds

Swapping link positions with jQuery

Enhanced Slider Display featuring Multiple Posts for Improved Performance

Hiding elements in FireBase and Angular based on user identification

Error: Trying to send FormData to ajax results in an Illegal Invocation TypeError being thrown

Problem with Flickity's is-selected feature

Identifying the differences between a select2 dropdown and select2 multiselect: a guide

Changing the height of one Div based on another Div's height

What is the correct way to establish and terminate a MongoDB connection in a Node.js application?

Netlify Lambda function with Expressjs generates a fresh session for each incoming request

Verifying if a div in jQuery holds a specific element

Is tsconfig.json Utilized by Gatsby When Using Typescript?