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.
body, html {
overflow-x: hidden !important;
}
@media (max-width: 786px){
body, html {
overflow-x: hidden!important;
}
}
selector :hover{
-webkit-text-stroke: 1px currentColor;
-webkit-text-fill-color: transparent;
}
sliding-text
<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>
selector{white-space: nowrap;}
selector{
transform: rotate(6deg) scale(1.1);
}
selector{
transform: rotate(-6deg) scale(1.1);
}
Contato Criando letreiro e fachadas com Eu sei que você estava procurando por isso! Sabe aquele letreiro que você ver…
Contato Estilização do com css. Que tal um cursor totalmente customizado na sua página? Voce vai aprender trocar totalmente o…
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.
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
