Criando letreiro e fachadas com

Eu sei que você estava procurando por isso!

Sabe aquele letreiro que você ver em alguns sites e sempre quis saber como se faz?
Então hoje você vai aprender, sem usar nenhum pluguin para isso; e de brinde ainda vai poder colocar as famosas faixas usando apenas elementor.

Tutorial Video Letreiro Sedrux

Tutorial Video Letreiro Sedrux Tutorial Video Letreiro Sedrux

Tutorial Video Letreiro Sedrux Tutorial Video Letreiro Sedrux

código css para retirar scroll lateral
				
					body, html {
overflow-x: hidden !important;
}

@media (max-width: 786px){
body, html {
overflow-x: hidden!important;
}
}
				
			

LETREIRO CONTINUO

código CSS USADO PARA hOVER

				
					selector :hover{
    -webkit-text-stroke: 1px currentColor;
    -webkit-text-fill-color: transparent;
}
				
			
cLASSE CSS
				
					sliding-text 
				
			
código javascript USADO
				
					<style>
body{
    --speed: 20s;
}
.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{
    -webkit-animation: sliding var(--speed) linear infinite;
    -moz-animation: sliding var(--speed) linear infinite;
    -o-animation: sliding var(--speed) linear infinite;
    animation: sliding var(--speed) linear infinite;
}
.sliding-text .elementor-widget-container{
    float: left;
}

@keyframe 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%); }
}
@keyframes sliding {
0%{ transform: translateX(0); }
100%{ transform: translateX(-100%); }
}
</style>

<script data-minify="1" src="https://sedrux.com.br/wp-content/cache/min/1/jquery-3.6.0.min.js?ver=1692669208" defer></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>
				
			

fAIXA DE TEXTO

código css Transformar em Linha
				
					selector{white-space: nowrap;}
				
			
código css para girar para direita
				
					selector{
    transform: rotate(6deg) scale(1.1);
}
				
			
código css para girar para esquerda
				
					selector{
    transform: rotate(-6deg) scale(1.1);
}
				
			

Você pode gostar tambem de:

Construindo letreiros no elementor

Contato Criando letreiro e fachadas com Eu sei que você estava procurando por isso! Sabe aquele letreiro que você ver…

Cursor do mouse personalizado no elementor

Contato Estilização do com css. Que tal um cursor totalmente customizado na sua página? Voce vai aprender trocar totalmente o…

Carrossel continuo com elementor

Contato Carrossel com elementor Tutorial de Carrossel contínuo com elementor Nesse tutorial, voce vai aprender a fazer um carrossel super…

Espero que esse tutorial te ajude em algum dos seus peojetos, compartilhe com amigos, deixe seu like.

Até breve.

Vamos tirar seu projeto do papel ?

Você conta seus sonhos, nós tornamos ele realidade de forma incrível.

Seu negócio vai decolar✌️

Sedrux Digital © 2022 Todos os direitos reservados