body::-webkit-scrollbar{
width: 10px;
}
body::-webkit-scrollbar-track{
background: #0c0c0c; /* altere a cor do fundo aqui */
}
body::-webkit-scrollbar-thumb{
background: linear-gradient(180deg, #791DF3 0%, #000000 100%); /* altere a cor do gradiente aqui ou use background-color para cor sólida */
border-radius: 10px; /* controle o arrendondamento da borda aqui */
border: 2px solid #0c0c0c; /* altere a cor da borda, recomendado usar a mesma do fundo */
}
selector .elementor-button{
background: linear-gradient(-45deg, #09E3A6, #B63BEB, #1AE0FA); /* altere as cores aqui */
animation: anime 5s linear infinite;
background-size: 600%;
}
@keyframes anime{
0%{
background-position: 0% 50%;
}
50%{
background-position: 100% 50%;
}
100%{
background-position: 0% 50%;
}
}
<link rel="stylesheet" data-origin-href="https://unpkg.com/lenis@1.1.18/dist/lenis.css" data-href="https://becaetano.com.br/wp-content/cache/flying-press/lenis.css">
<script defer data-origin-src="https://unpkg.com/lenis@1.1.18/dist/lenis.min.js" data-loading-method="user-interaction" data-src="https://becaetano.com.br/wp-content/cache/flying-press/lenis.min.js"></script>
<script data-loading-method="user-interaction" data-src="data:text/javascript,document.addEventListener%28%27DOMContentLoaded%27%2C%20function%20%28%29%20%7B%0A%20%20%20%20%20%20%20%20const%20lenis%20%3D%20new%20Lenis%28%29%3B%0A%0A%20%20%20%20%20%20%20%20function%20raf%28time%29%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20lenis.raf%28time%29%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20requestAnimationFrame%28raf%29%3B%0A%20%20%20%20%20%20%20%20%7D%0A%0A%20%20%20%20%20%20%20%20requestAnimationFrame%28raf%29%3B%0A%20%20%20%20%7D%29%3B"></script>
<script data-loading-method="user-interaction" data-src="data:text/javascript,const%20elementos%20%3D%20document.querySelectorAll%28%27.scroll-left%2C%20.scroll-right%2C%20.scroll-bottom%2C%20.scroll-top%2C%20.lista%20.elementor-icon-list-item%27%29%3B%0D%0A%20%20%20%20const%20posicaoScroll%20%3D%20window.innerHeight%20%2A%200.7%3B%0D%0A%20%20%20%20%0D%0A%20%20%20%20function%20fadeScroll%28%29%7B%0D%0A%20%20%20%20%20%20%20%20elementos.forEach%28%28elemento%29%20%3D%3E%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20const%20elementoTop%20%3D%20elemento.getBoundingClientRect%28%29.top%20-%20posicaoScroll%3B%0D%0A%20%20%20%20%20%20%20%20if%28elementoTop%20%3C%20120%29%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elemento.classList.add%28%27ativado%27%29%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20else%20%7B%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20elemento.classList.remove%28%27ativado%27%29%3B%0D%0A%20%20%20%20%20%20%20%20%7D%0D%0A%20%20%20%20%20%20%20%20%7D%29%0D%0A%20%20%20%20%7D%0D%0A%20%20%20%20%0D%0A%20%20%20%20window.addEventListener%28%27scroll%27%2C%20fadeScroll%29%3B"></script>
.scroll-left{
opacity: 0;
filter: blur(10px);
transition: .5s all;
transform: translate3d(-30px, 0, 0);
}
.scroll-bottom{
opacity: 0;
filter: blur(10px);
transition: .5s all;
transform: translate3d(0, 30px, 0);
}
.scroll-right{
opacity: 0;
filter: blur(10px);
transition: .5s all;
transform: translate3d(30px, 0, 0);
}
.scroll-top{
opacity: 0;
filter: blur(10px);
transition: .5s all;
transform: translate3d(0, -30px, 0);
}
.ativado{
opacity: 1;
filter: blur(0px);
transform: translate3d(0, 0, 0);
}
.lista .elementor-icon-list-item{
opacity: 0;
transition: .5s all;
transform: translate3d(-30px, 0, 0);
filter: blur(10px);
}
.lista .elementor-icon-list-item.ativado{
opacity: 1;
transition: .5s all;
transform: translate3d(0, 0, 0);
filter: blur(0px);
}