मैं एक साइडबार एनीमेशन प्रभाव बनाने की कोशिश कर रहा हूं:

<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>

मैंने HTML कोड लिखा है, लेकिन समस्या यह है कि मैं slide-out एनिमेशन प्रभाव के साथ प्रत्येक टेक्स्ट को एक बार में एक-एक करके कैसे प्रदर्शित करूं? लूप को अनंत बार काम करना चाहिए।

1
Harshit 18 अक्टूबर 2018, 22:25

2 जवाब

मेरा तेज और गंदा कुछ इस तरह दिखेगा।

// 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);

फेड इन / स्लाइड एनीमेशन को सीएसएस ट्रांजिशन में हैंडल किया जाना चाहिए।

0
4m1r 18 अक्टूबर 2018, 19:50

यह कुछ ऐसा है जिसे मैंने आखिरकार समझ लिया!

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); 
0
Harshit 18 अक्टूबर 2018, 20:16