JSFiddle - React, Tailwind, and code Playground

Fading Loop Terms

by Jennifer Perrin

HTML

<p>eg. <span>Envato</span></p>

JavaScript

var $target = $("p span"), // The target element
    initialTerm = $target.text(), // The first term
    terms = ["CodeCanyon", 
             "ThemeForest", 
             "GraphicRiver", 
             "PhotoDune", 
             "ActiveDen", 
             "AudioJungle", 
             "VideoHive", 
             "3DOcean"], // Our list of terms
    i = 0, // Our starting point
    changeTerms = setInterval(function() { // Term Changer function
        
        if( i >= terms.length ) { // If the term changer reaches its limit
            i = 0; // Set the term number back to 0. The loop.
        }
        
        $target.fadeOut(function() {
            $(this).text(terms[i]);
            $(this).fadeIn();
        }); // Change term
        i++; // Increase the term number
    
    }, 2000); // All that happen in an interval of 2 seconds
terms.push(initialTerm); // We add the first term into our list of terms since we want it to appear again when the loop happens