CODEWITHSUNDEEP
javascripthtmlcss
Matt
Matt

Reputation: 93

Smooth changing text

I am trying to add some automatically changing text every minute in my website. I am happy with my code, but I want smoother animation, so the content appears and disappears more slowly. Any ideas?

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
function ChangeText(){
  document.getElementById('Citation').innerHTML = cit[ind];
  document.getElementById('author').innerHTML = author[ind];          
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
  setTimeout("ChangeText();", 400);
}
ChangeText();
<p id = "Citation">
</p>
<p id = "author">
</p>

Upvotes: 0

Views: 3665

Answers (1)

Arthur Weborg
Arthur Weborg

Reputation: 8580

We can make use of some css transitions and expand your javascript and html to get the desired functionality. Code below the following text description.

With css we can tell the browser to change certain properties with different animation techniques (ease-in, ease-out, etc.) over target durations of time. The following defaults to an ease transition, over 1 second, targeting any opacity changes to a given element that adheres to the css selector/rule (see w3 schools transitions for more).

transition: opacity 1s;

Now for the setting up the html/javascript to make use of transitions. We'll want to make some html elements that will be toggled back and forth with the next citation/author. These will essentially be faded-in/out as we increment our target citation/author. We'll need to make use of some absolute positioning so that the elements overlap, we'll need the help of some containing divs to get the job done (see HTML and css below, note I'm doing 1 second transitions).

After defining our HTML, we have to update the javascript to set the innerHTML of both the next and original curations/authors (see updated ChangeCitation1() and ChangeCitation2() methods below, note the 2 second delay to toggling the text, for you this would be set to perhaps 60s in production).

Basically we have a toggle function that sets the curations/authors and curations/authors on deck and flips the opacity back, infinitely. With fades of 1 second, and a changing of the text every 2 seconds.

var cit = new Array(" Cool APP", " Best App ", " Love this App", " So good ");
var author = new Array("Matt"," Laz ","SoSo","JoJo");
var ind= 0;
document.getElementById('Citation1').innerHTML = cit[ind];
document.getElementById('Author1').innerHTML = author[ind]; 
ChangeCitation2();
function ChangeCitation2(){
  incrementIndex()
  document.getElementById('Citation2').innerHTML = cit[ind];
  document.getElementById('Author2').innerHTML = author[ind]; 
  document.getElementById('Citation1').style.opacity = 0;
  document.getElementById('Author1').style.opacity = 0;
  document.getElementById('Citation2').style.opacity = 1;
  document.getElementById('Author2').style.opacity = 1;
  setTimeout(ChangeCitation1, 2000);
}
function ChangeCitation1(){
  incrementIndex();
  document.getElementById('Citation1').innerHTML = cit[ind];
  document.getElementById('Author1').innerHTML = author[ind];
  document.getElementById('Citation1').style.opacity = 1;
  document.getElementById('Author1').style.opacity = 1;
  document.getElementById('Citation2').style.opacity = 0;
  document.getElementById('Author2').style.opacity = 0;
  setTimeout(ChangeCitation2, 2000);
}
function incrementIndex(){
  if(ind < cit.length - 1 ){
    ind++;
  }else{
    ind = 0;
  }
}
#Citation1, #Author1{
    transition: opacity 1s;
}
#Citation2, #Author2{
    transition: opacity 1s;
    position:absolute;
    top:0px;
    margin-top:0px
}
#citationContainer, #authorContainer{
    position:relative;
}
<div id="citationContainer">
    <p id = "Citation1"></p>
    <p id = "Citation2"></p>
</div>
<div id="authorContainer">
    <p id = "Author1"></p>
    <p id = "Author2"></p>
</div>

You could probably expand the following to use the psuedo element ::before or ::after, and manipulate it's content in the css... but this is a good starting place for you to dig into!

Upvotes: 1

Related Questions