Trocar palavras com tempo e efeito com javaScript

Postado: 24 de maio de 2021

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

Publicado por: loopnerd

808 Visualizações

2 respostas para “Trocar palavras com tempo e efeito com javaScript”

  1. Loop Nerd disse:

    Olá Bruno, Bom dia! Obrigado pelo seu comentário. Eu não nunca trabalhei com o shopify. porém eu pesquisei aqui ele é TIPO um wordpress né. È um e-commerce é tem um Painel de administração. ouseja, você pode editar o seu tema. eu vi em alguns vídeos que dá para adicionar um HTML Personalizado. Logo eu não sei se o sistema aceita adicionar Scritp.
    Neste caso requer um pouco mais de conhecimento.

    Veja Neste tutorial Aqui:
    https://youtu.be/7xN7AoFRgy8?t=347

    Pelo que eu vi aqui tem como sim:
    https://youtu.be/STkXfx9gstY?t=76

    Espero ter ajudado.

  2. Bruno disse:

    É possivel instalar esse código no shopify? Se sim, como rs

Deixe um comentário

O seu endereço de e-mail não será publicado.