javascript - How to animate the text in a for-loop? - Stack Overflow

admin管理员组

文章数量:1417070

I'm trying to create a sidebar animation effect as:

<div class="sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keywords" id="change">
        <strong>
            <b class="hidden">software engineer</b>
            <b class="hidden">lifelong learner</b>
            <b class="hidden">blogger</b>
            <b class="hidden">traveller</b>
        </strong>
    </span><br>
</div>

I've written the HTML code but issue is that how should I display each text one at a time with small delay with slide-out animation effect? The loop should work infinite times.

I'm trying to create a sidebar animation effect as:

<div class="sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keywords" id="change">
        <strong>
            <b class="hidden">software engineer</b>
            <b class="hidden">lifelong learner</b>
            <b class="hidden">blogger</b>
            <b class="hidden">traveller</b>
        </strong>
    </span><br>
</div>

I've written the HTML code but issue is that how should I display each text one at a time with small delay with slide-out animation effect? The loop should work infinite times.

• javascript
• html
• css

Share Improve this question Follow edited Oct 18, 2018 at 20:17 Harshit asked Oct 18, 2018 at 19:25 HarshitHarshit 1,5652121 silver badges4646 bronze badges 2

• How should I proceed? It would be a great help :) Thanks! – Harshit Commented Oct 18, 2018 at 19:33
• 1 might be a job for setInterval and use a counter or rotate your array of strings. – 4m1r Commented Oct 18, 2018 at 19:37

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

Make it simple by using CSS key-frame animation.

Below is an example.

body{
    font-family:calibri;
  }
.codinfox-changing-keywords{
  vertical-align:top;
  overflow:hidden;
  height:20px;
  position:relative;
  display: inline-block;
    width: 250px;
}
.hidden{
  position:absolute;
  top: 20px;
  display:inline-block;
  width:250px;
    opacity:0;
  animation: slideme 8s infinite;
}
.hidden:nth-child(3){
  animation-delay: 2s;
}
.hidden:nth-child(5){
  animation-delay: 4s;
}
.hidden:nth-child(7){
  animation-delay: 6s;
}

@keyframes slideme {
  0% {
    top: 20px;
    opacity:0;
  }
  5% {
    top: 0px;
    opacity:1;
  }
  10%{
    top : 0;
    opacity:1;
  }
  20%{
    opacity:1;
  }
  25% {    
  opacity:0.1;
    top : 0;
  }
  30% {
    opacity:0;
    top: 20px;
  }
}

<div class="codinfox-sidebar-description sidebar-personal-info-section">
    A passionate
    <div class="codinfox-changing-keywords" id="change">
        <strong>
            <b class="hidden">software engineer</b><br/>
            <b class="hidden">lifelong learner</b><br/>
            <b class="hidden">blogger</b><br/>
            <b class="hidden">traveller</b>
        </strong>
    </div>
</div>

You can test it here as well!

First, you need to work a little bit on your HTML. The <strong> tag shouldn't be used to style elements, not to mention the <b> tags. Below is my version of the code. First the HTML:

<div class="codinfox-sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keyword shown">software engineer</span>
    <span class="changing-keyword">lifelong learner</span>
    <span class="changing-keyword">blogger</span>
    <span class="changing-keyword">traveller</span>
</div>

I took the liberity to change the class names and remove some tags that were, in my opinion, unnecessary here. Now, JavaScript:

const changingKeywords = document.querySelectorAll('span.changing-keyword');
const keywordsToggle = setKeywordsToggle(changingKeywords);

function setKeywordsToggle (keywords) {
    let index = 0;
  return setInterval(() => {
    keywords[index].classList.remove('shown');
    if (++index >= keywords.length) 
        index = 0;
    keywords[index].classList.add('shown');
  }, 2000);
}

Notice that I actually return the setInterval() function and assign it to keywordsToggle variable. This way, if I ever want to stop the animation, I can easily do so by running clearInterval(). The code toggles through all keywords it finds and assigns the shown class to the element determined by the value of index variable.

Finally, sample CSS:

.sidebar-personal-info-section {
  position: relative;
}

.changing-keyword {
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s, visibility 1s;
  visibility: collapse;
  position: absolute;
  padding-left: .2rem;
}

.shown {
  opacity: 1;
  visibility: visible;
}

Notice the visibility transition, which actually works as transition delay. Other than that, I had to use a position property to make sure that every keyword is positioned near the "passionate" word, otherwise every word would appear in it's original position (I didn't use display:none since it's not animatable).

Working example:

const changingKeywords = document.querySelectorAll('span.changing-keyword');
const keywordsToggle = setKeywordsToggle(changingKeywords);

function setKeywordsToggle (keywords) {
	let index = 0;
  return setInterval(() => {
  	keywords[index].classList.remove('shown');
    if (++index >= keywords.length) 
    	index = 0;
    keywords[index].classList.add('shown');
  }, 2000);
}

.sidebar-personal-info-section {
  position: relative;
}

.changing-keyword {
  font-weight: bold;
  opacity: 0;
  transition: opacity 1s, visibility 1s;
  visibility: collapse;
  position: absolute;
  padding-left: .2rem;
}

.shown {
  opacity: 1;
  visibility: visible;
}

<div class="codinfox-sidebar-description sidebar-personal-info-section">
    A passionate
    <span class="changing-keyword shown">software engineer</span>
    <span class="changing-keyword">lifelong learner</span>
    <span class="changing-keyword">blogger</span>
    <span class="changing-keyword">traveller</span>
</div>

My quick and dirty would look something like this.

// add rotate to Array
Array.prototype.rotate = function(n) {
    return this.slice(n, this.length).concat(this.slice(0, n));
}

// setup array
const jobs = ['employee', 'manager'];

// rotate jobs function
const rotateJobs = () => {
    document.querySelector('#id').innerHtml = jobs.rotate(1).shift();
}

// set interval
setInterval(rotateJobs, 1000);

The fade in / slide animation should be handled in css transitions.

This something what I finally figured out!

var title = ['software engineer', 'tech blogger', 'traveller', 'lifelong learner'];

var i = 0;  // the index of the current item to show

setInterval(function() {            // setInterval makes it run repeatedly
  document
    .getElementById('change')
    .innerHTML = title[i++];    // get the item and increment
  if (i == title.length) i = 0;   // reset to first element if you've reached the end
}, 2000); 

本文标签： javascriptHow to animate the text in a forloopStack Overflow