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

Utilizing Dojo widgets in Xpages

Is there a way to extract data from the Redux state in a React component?

Obtaining localStream for muting microphone during SIP.js call reception

Access to the Express Node.js server is restricted to the machine that is currently hosting the server

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

Issue with Express.js and EJS application: The edit form fails to display the current category of the post

What could be causing my UI Bootstrap datepicker-popup to suddenly stop functioning?

"Exploring the various configurations for session handling in NodeJs

Tips for resolving the error "Cannot access the title property of undefined" when utilizing NextJS prerendering

I cannot locate the dropdown list anywhere

Implementing closure within a recursive function allows for better control

"Exploring the Magic of Jquery's Fadein() Animation

retrieving the webpage's HTML content from the specified URL using AngularJS

transfer the value of a method to a different component

Ways to address the problem of returning assignments

Adjust the font weight to bold for specific sections of the option value within a reactjs component

Is there a way to access the rear camera on a mobile device using webcam.js?

Acquiring a property from an object that is specified within a function

Struggling to decide on the perfect CSS selector for my puppeteer script

Undefined scope