Códigos – Faixa Animada

[Código] Faixa reta

Clique no canto superior direito para copiar.

				
					selector{
    white-space: nowrap;
}

[Código] Faixa reta animada

Clique no canto superior direito para copiar.

				
					<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 data-loading-method="user-interaction" data-src="data:text/javascript,src%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-3.6.0.min.js%22"></script>

<script data-loading-method="user-interaction" data-src="data:text/javascript,var%20%24%20%3D%20jQuery%0A%0A%24%28document%29.ready%28function%28%29%7B%0A%0A%20%20%20%20var%20h%20%3D%20%5B%5D%0A%0A%20%20%20%20%24%28%27.sliding-text%27%29.each%28function%28%29%7B%0A%20%20%20%20%20%20%20%20h.push%28%24%28this%29.find%28%27.elementor-widget%27%29.clone%28%29.html%28%29%29%0A%20%20%20%20%7D%29%0A%0A%20%20%20%20function%20init%28%29%7B%0A%20%20%20%20%20%20%20%20%24%28%27.sliding-text%27%29.each%28function%28i%29%7B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20%24this%20%3D%20%24%28this%29%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.find%28%27.elementor-widget%27%29.removeClass%28%27sliding%27%29%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20amount%20%3D%20Math.ceil%28%24%28window%29.width%28%29%2F%24%28this%29.find%28%27.elementor-widget-container%27%29.outerWidth%28true%29%29%20%2B%201%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.find%28%27.elementor-widget%27%29.empty%28%29.addClass%28%27sliding%27%29%0A%20%20%20%20%20%20%20%20%20%20%20%20%24this.find%28%27.elementor-widget%27%29.html%28h%5Bi%5D.repeat%28amount%29%29%0A%20%20%20%20%20%20%20%20%7D%29%0A%20%20%20%20%7D%0A%0A%20%20%20%20init%28%29%0A%20%20%20%20%24%28window%29.on%28%27load%20resize%27%2C%20init%29%0A%7D%29"></script>

[Código] Faixa reta animada para a direita

Atenção: Utilize o código de estilo abaixo para fazer a movimentação do slide para a direita.
No container coloque as seguintes classes: "sliding-text sliding-text-right" (pode copiar e colar sem as aspas).

Clique no canto superior direito para copiar.

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

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

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

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

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

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

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

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

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

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

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

[Código] Faixa diagonal

Clique no canto superior direito para copiar.

				
					selector{
    white-space: nowrap;
}

				
					selector{
    transform: rotate(5deg) scale(1.01);
}