Steer clear of dividing words

Question

Steer clear of dividing words

I am attempting to showcase sentences letter by letter with a fade in/fade out effect. However, I am facing an issue where words break in the middle. How can this word breaking be prevented?

var quotes = document.getElementsByClassName('quote');
var quoteArray = [];
var currentQuote = 0;
quotes[currentQuote].style.opacity = 0;
for (var i = 0; i < quotes.length; i++) {
  splitLetters(quotes[i]);
}
function changeQuote() {
  var cw = quoteArray[currentQuote];
  var nw = currentQuote == quotes.length-1 ? quoteArray[0] : quoteArray[currentQuote+1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }
  
  currentQuote = (currentQuote == quoteArray.length-1) ? 0 : currentQuote+1;
}
function animateLetterOut(cw, i) {
  setTimeout(function() {
cw[i].className = 'letter out';
  }, 0);
}
function animateLetterIn(nw, i) {
  setTimeout(function() {
nw[i].className = 'letter in';
  }, 340+(i*30));
}
function splitLetters(quote) {
  var content = quote.innerHTML;
  console.log(quote.innerHTML);
  quote.innerHTML = '';
  var letters = [];
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    letter.innerHTML = content.charAt(i)==' '?'&nbsp;':content.charAt(i);
    quote.appendChild(letter);
    letters.push(letter);
  }
  
  quoteArray.push(letters);
}
changeQuote();
setInterval(changeQuote, 10000);

body {
  font-weight: 600;
  font-size: 40px;
}
.text {
  position: relative;
}
.quote {
  position: absolute;
  opacity: 0;
}
.letter {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-transform: translateZ(25px);
          transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
          transform-origin: 50% 50% 25px;
}
.letter.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.7s, opacity 0.7s linear;
}
.letter.behind {
  visibility: hidden;
  opacity: 0;
}
.letter.in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s linear;
}

<body>
<div class="text">
  <p>
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
  </p>
  
</div>

javascript html css effects

Answer 1

Answer №1

Your setInterval(changeQuote, 5000) is responsible for the unique effect you have skillfully implemented in a concise manner. Initially playing around with the timing intervals from 5000ms to 15000ms down to approximately 8000~10000ms seemed to yield the best results.

Try changing it to setInterval(changeQuote, 9000) and observe the difference.

However, considering scalability, there needs to be a way to ensure that the setInterval function waits until the quoteArray has completed pushing all the letters.

MODIFICATION

Based on the valuable feedback provided in the comments, I deduced the following:

From a JavaScript standpoint, each letter in the sequence is encapsulated within a <span> element, thus serving as individual entities. What was missing was the ability to group these letters into words to enable proper formatting according to their parent container.

In terms of CSS styling, the container housing the letters, known as quote, required specific styles to accurately represent its contents. By incorporating properties such as white-space: nowrap and display: block, I was able to provide a flexible container for its children to adjust based on screen width.

Refer to the corrected snippet below for further clarification.

var quotes = document.getElementsByClassName('quote'),
  quoteArray = [],
  currentQuote = 0;

quotes[currentQuote].style.opacity = 0;

for (var i = 0; i < quotes.length; i++) {
  splitLetters(quotes[i]);
}

function changeQuote() {
  var cw = quoteArray[currentQuote];
  var nw = currentQuote == quotes.length - 1 ? quoteArray[0] : quoteArray[currentQuote + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentQuote = (currentQuote == quoteArray.length - 1) ? 0 : currentQuote + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
    cw[i].className = 'letter out';
  }, 0);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
    nw[i].className = 'letter in';
  }, 340 + (i * 30));
}

function splitLetters(quote) {
  var content = quote.innerHTML,
  words = [],
      word = document.createElement('span');
  
  word.className = "word";
  word.innerHTML = "";
  quote.innerHTML = "";
  
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    
    if(content.charAt(i) !== " "){
    letter.innerHTML = content.charAt(i);
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
    }
    else {
    letter.innerHTML = "&nbsp";
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
      quote.appendChild(word);
      words.push(word);
      word = document.createElement('span');
      word.className = "word";
    }
  }

  quoteArray.push(words);
}
changeQuote();
setInterval(changeQuote, 10000);

body {
  font-weight: 600;
  font-size: 40px;
}

.text {
  position: relative;
}

.quote {
  position: absolute;
  display: block;
  opacity: 0;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
  transform-origin: 50% 50% 25px;
}

.letter.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.7s, opacity 0.7s linear;
}

.letter.behind {
  visibility: hidden;
  opacity: 0;
}

.letter.in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s linear;
}

<div class="text">
  <p>
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
  </p>
</div>

Answer 2

Your setInterval(changeQuote, 5000) is responsible for the unique effect you have skillfully implemented in a concise manner. Initially playing around with the timing intervals from 5000ms to 15000ms down to approximately 8000~10000ms seemed to yield the best results.

Try changing it to setInterval(changeQuote, 9000) and observe the difference.

However, considering scalability, there needs to be a way to ensure that the setInterval function waits until the quoteArray has completed pushing all the letters.

MODIFICATION

Based on the valuable feedback provided in the comments, I deduced the following:

From a JavaScript standpoint, each letter in the sequence is encapsulated within a <span> element, thus serving as individual entities. What was missing was the ability to group these letters into words to enable proper formatting according to their parent container.

In terms of CSS styling, the container housing the letters, known as quote, required specific styles to accurately represent its contents. By incorporating properties such as white-space: nowrap and display: block, I was able to provide a flexible container for its children to adjust based on screen width.

Refer to the corrected snippet below for further clarification.

var quotes = document.getElementsByClassName('quote'),
  quoteArray = [],
  currentQuote = 0;

quotes[currentQuote].style.opacity = 0;

for (var i = 0; i < quotes.length; i++) {
  splitLetters(quotes[i]);
}

function changeQuote() {
  var cw = quoteArray[currentQuote];
  var nw = currentQuote == quotes.length - 1 ? quoteArray[0] : quoteArray[currentQuote + 1];
  for (var i = 0; i < cw.length; i++) {
    animateLetterOut(cw, i);
  }
  for (var i = 0; i < nw.length; i++) {
    nw[i].className = 'letter behind';
    nw[0].parentElement.style.opacity = 1;
    animateLetterIn(nw, i);
  }

  currentQuote = (currentQuote == quoteArray.length - 1) ? 0 : currentQuote + 1;
}

function animateLetterOut(cw, i) {
  setTimeout(function() {
    cw[i].className = 'letter out';
  }, 0);
}

function animateLetterIn(nw, i) {
  setTimeout(function() {
    nw[i].className = 'letter in';
  }, 340 + (i * 30));
}

function splitLetters(quote) {
  var content = quote.innerHTML,
  words = [],
      word = document.createElement('span');
  
  word.className = "word";
  word.innerHTML = "";
  quote.innerHTML = "";
  
  for (var i = 0; i < content.length; i++) {
    var letter = document.createElement('span');
    letter.className = 'letter';
    
    if(content.charAt(i) !== " "){
    letter.innerHTML = content.charAt(i);
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
    }
    else {
    letter.innerHTML = "&nbsp";
      word.innerHTML = word.innerHTML.concat(letter.innerHTML);
      quote.appendChild(word);
      words.push(word);
      word = document.createElement('span');
      word.className = "word";
    }
  }

  quoteArray.push(words);
}
changeQuote();
setInterval(changeQuote, 10000);

body {
  font-weight: 600;
  font-size: 40px;
}

.text {
  position: relative;
}

.quote {
  position: absolute;
  display: block;
  opacity: 0;
  white-space: nowrap;
}

.letter {
  display: inline-block;
  position: relative;
  float: left;
  -webkit-transform: translateZ(25px);
  transform: translateZ(25px);
  -webkit-transform-origin: 50% 50% 25px;
  transform-origin: 50% 50% 25px;
}

.letter.out {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.7s, opacity 0.7s linear;
}

.letter.behind {
  visibility: hidden;
  opacity: 0;
}

.letter.in {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.7s linear;
}

<div class="text">
  <p>
    <span class="quote">TEXT ONE(1): For example, if you are designing a brand new website for someone, most times you will have to make sure the prototype looks finished by inserting text or photos or what have you. </span>
    <span class="quote">TEXT TWO(2): The purpose of this is so the person viewing the prototype has a chance to actually feel and understand the idea behind what you have created.</span>
  </p>
</div>

Steer clear of dividing words

Answer №1

MODIFICATION

Similar questions

JSX refusing to display

Running a 2D JavaScript game script on a React page - A step-by-step guide!

What is the method for including HTML special characters in d3.js?

Issues arise when incorporating background images with bootstrap 3

Apply CSS code to create a fading effect for a container

Is there a way for me to stack the submenu links on top of each other?

Creating a Custom Rule for Checkbox Validation using jQuery

Transform JSON data into a JavaScript variable

Effortless AJAX Submission and MySQL Data Refresh

Display substitute text for the date input field

What sets xhr.response apart from xhr.responseText in XMLHttpRequest?

How can I increase the element by $100 using a dropdown selection in JavaScript?

Tips for creating a personalized dialog box after logging in with React Admin based on the server's response

Learn how to retrieve a jqGrid ajax Nested Array of Json string in C# using Newtonsoft Json

What is the best way to retrieve properties from a different module in JavaScript?

What is the best method to insert multiple rows of the same height into a table cell in

Vibrant diversity in a solitary symbol

Looking for a way to efficiently sort through props in Next.js? Struggling with filtering data within props from componentDidMount in Next.js?

What is the best way to retrieve user data for showcasing in a post feed using firebase's storage capabilities?

What is the process of importing a cascading style sheet into a C# object?