Trocar de palavra com tempo e efeito usando Jquery.

Trocando a palavra.

Criar efeito é muito importante, torna a pagina mais interativa e agradável visualmente.
Vamos aprender como fazer a troca de palavra e ao mesmo tempo tornar essa troca mais suave usando efeito.

Prepare o arquivo HTML com um paragrafo e um span.

<p>Chocolate <span id="frases"></span>.</p>

Antes de inciar visite o site do jQuery para baixar os arquivos ou utilize o CDN abaixo.

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

Criando a troca de palavra.

Primeiro vamos definir as variáveis, uma para guardar as frases, uma para o tempo e uma para definir o valor do array inicial.

let textos = ["branco", "preto", "amargo"]
let atual = 0
let tempo = 3000

Segundo pegar o ID do span que vai receber a frase, e criar o setInterval que vai receber a variável tempo.

$('#frases').text(textos[atual++])

    setInterval(function() {
        
    }, tempo);

Observe que no mesmo lugar que pegamos o ID, também chamamos a variável textos e colocamos o valor da variável atual que define o numero do array.


Terceiro, criar dentro do setInterval a animação e mudar o valor do array sempre que recarregar.

setInterval(function() {
        $('#frases').fadeOut(function() {

            if (atual >= textos.length) {
            atual = 0;
            }

           $(this).text(textos[atual++]).fadeIn();

        });
    }, tempo);

Experimente colocar no lugar do fadeIn e fadeOut, outra animação com slideUp(800); slideDown(800);


Confira também outro tutorial, Animar ao Scroll com jQuery.

https://desenvolvedor-web.blogspot.com.br/2018/01/animar-ao-scroll-com-jquery.html