Trocar palavras com tempo e efeito com javaScript

Neste artigo vamos trocar as palavras com efeitos:

fadeIn, fadeOut, slideUp e SlideDown com javascript.

Vamos Adicionar o Script:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
    
    $(function () {

        let palavras  = ["Html", "Css", "Jquery", "WordPress", "Design Responsivo"]
        let inicio    = 0
        let intervalo = 1500


        $('#texto').text(palavras[inicio++])

            setInterval(function() {
                
        }, intervalo);


        setInterval(function() {

              //$('#texto').fadeOut(function() {
                $('#texto').slideUp(function() {

                    if (inicio >= palavras.length) {
                     inicio = 0;
                    }

              //$(this).text(palavras[inicio++]).fadeIn();
                $(this).text(palavras[inicio++]).slideDown();

                });
        }, intervalo);

    });

</script>>

Repare onde estar comentado você pode trocar de fadeOut para slideUp. com isso o efeito muda.

Vamos Adicionar o html par chamar o ID:

  <div class="frase">

       <p>Artigos de desenvolvimento web:</p> <b id="texto"></b>

  </div>

por ultimo vamos adicionar um estilo css para dar destaque nas palavras:

.frase { 

	width:100%; 
	height:40px; 
	float:left; 
	font-size:1.2em; 
	display:block;
}

.frase p { 

	float:left; 
	font-family:'open_sanslight'; 
}

.frase b { 

	padding:0em 0.3em; 
	color:#27d1d5; 
	text-transform:uppercase;
	font-weight:bold; 
	font-family:'open_sansbold';
}

Detalhe importante deixe a altura height:40px; principalmente se você for usar o slideUp e slideDown.

Baixar Código Veja Funcionando