Adicionar uma faixa animada em seu site WordPress traz vantagens como atrair a atenção dos visitantes, destacar promoções e melhorar a experiência do usuário.

Neste guia simples, vou ensinar como implementar facilmente essa funcionalidade e potencializar seu site.

Vou ensinar de duas maneiras, a primeira vamos utilizar o Plugin RomethemeKit For Elementor, e a segunda opção adicionaremos as faixas sem usar plugins!

CÓDIGO CSS

Classe CSS:

sliding-text

<style>
body{
	--speed: 10s;
}

.sliding-text .elementor-widget-wrap{
  display: block !important;
}

.sliding-text .elementor-widget{
  overflow: hidden;
  width: 10000vw !important;
  max-width: 10000vw !important;
}

.sliding-text .sliding .elementor-widget-container{
	animation: sliding var(--speed) linear infinite;
  -webkit-animation: sliding var(--speed) linear infinite;
  -moz-animation: sliding var(--speed) linear infinite;
  -o-animation: sliding var(--speed) linear infinite;
}

.sliding-text .elementor-widget-container{
  float: left;
}

.sliding-text.reverse .elementor-widget-wrap{
  transform: rotate(180deg);
}

.sliding-text.reverse .sliding .elementor-heading-title{
  transform: scale(-1, -1);
}

@keyframes sliding{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-100%); }
}

@-webkit-keyframes sliding{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-100%); }
}

@-moz-keyframes sliding{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-100%); }
}

@-o-keyframes sliding{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-100%);}
}
</style>

<script>window.addEventListener('DOMContentLoaded', function() { src="https://code.jquery.com/jquery-3.6.0.min.js"});</script>

<script>window.addEventListener('DOMContentLoaded', function() {
var $ = jQuery

$(document).ready(function(){

    var h = []

    $('.sliding-text').each(function(){
        h.push($(this).find('.elementor-widget').clone().html())
    })

    function init(){
        $('.sliding-text').each(function(i){

            var $this = $(this)

            $this.find('.elementor-widget').removeClass('sliding')

            var amount = Math.ceil($(window).width()/$(this).find('.elementor-widget-container').outerWidth(true)) + 1

            $this.find('.elementor-widget').empty().addClass('sliding')
            $this.find('.elementor-widget').html(h[i].repeat(amount))
        })
    }

    init()
    $(window).on('load resize', init)
})
});</script>

Compre temas e plugins WordPress ativados na versão Pro pelo menor preço do mercado!

• Elementor Pro Atualizado Adicione o cupom: CUPOM10 e pague apenas R$10,00 no Elementor Pro
• All-in-One WP Migration Unlimited 2.59 Adicione o cupom: ELITE10 e pague apenas R$10,00