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 */
}
/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-c05529d */
.elementor-button {
border-radius: 14px;
animation: 2.4s cubic-bezier(0.2, 0.5, 0.9,0.6) 2s infinite normal none running textura;
background-image: linear-gradient(45deg, #4B55DB, #34E0E0, #4B55DB, #4B55DB, #34E0E0) /**altere aqui as cores do degrade sendo: cor do canto, cor próxima ao centro, cor do meio, cor próxima ao centro, cor do canto**/;
}
/**Mouse em cima**/
.elementor-button:hover {
border-radius: 14px;
animation: 3.4s cubic-bezier(0.2, 0.5, 0.9,0.6) 2s infinite normal none running textura;
background-image: linear-gradient(45deg, #217DEA, #539FF9, #ACD2FF, #539FF9, #217DEA);
}
.elementor-button{
/**altere aqui as cores do degrade**/
background-size: 400% 200%;
transition: background 1.6s cubic-bezier(0.55, 0.1, 0.47, 0.94) 0s;
transition: all .8s;
box-shadow: 0 0px 32px -2px rgba(70, 51, 175, 0.8)/**cores do brilho atrás do botão**/;
}
@keyframes textura {
0% {
background-position: 0.0;
}
100% {
background-position: 100% 0;
}
}
selector .elementor-button{
box-shadow: 0 0 0 0 #000;
animation: pulse-white 2s infinite;
}
@keyframes pulse-white {
0% {
transform: scale(1);
box-shadow: 0 0 0 0 #E8B042
}
70% {
transform: scale(1.01);
box-shadow: 0 0 0 10px transparent
}
100% {
transform: scale(1);
box-shadow: 0 0 0 0 transparent
}
}
<script src="https://cdn.jsdelivr.net/gh/studio-freight/lenis@1.0.22/bundled/lenis.min.js"></script>
<script>
const lenis = new Lenis({
duration: 1.2,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
orientation: 'vertical',
gestureOrientation: 'vertical',
smoothWheel: true,
wheelMultiplier: 1,
smoothTouch: false,
touchMultiplier: 2,
infinite: false,
})
//get scroll value
lenis.on('scroll', (e) => {
console.log(e)
})
function raf(time) {
lenis.raf(time)
requestAnimationFrame(raf)
}
requestAnimationFrame(raf)
</script>
<script>
const elementos = document.querySelectorAll('.scroll-left, .scroll-right, .scroll-bottom, .scroll-top, .lista .elementor-icon-list-item');
const posicaoScroll = window.innerHeight * 0.7;
function fadeScroll(){
elementos.forEach((elemento) => {
const elementoTop = elemento.getBoundingClientRect().top - posicaoScroll;
if(elementoTop < 120) {
elemento.classList.add('ativado');
}
else {
elemento.classList.remove('ativado');
}
})
}
window.addEventListener('scroll', fadeScroll);
</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);
}
selector.elementor-sticky--effects{
background-color: rgba(0,0,0,0.4)!important;
backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px); }
selector{ transition: background-color 1s ease !important; }
selector.elementor-sticky--effects >.elementor-container{ min-height: 70px;
} selector > .elementor-container{ transition: min-height 1s ease !important; }
selector {
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #ccc, transparent)1;
}
selector .swiper-wrapper{
-webkit-transition-timing-function: linear !important;
transition-timing-function: linear !important;
}
selector{
position: relative;
animation: lightning 4s ease-out infinite;
}
@keyframes lightning{
0%{
filter: brightness(1);
}
86%{
filter: brightness(1);
}
87.75%{
filter: brightness(1.8);
}
89.5%{
filter: brightness(1.3);
}
93%{
filter: brightness(3);
}
100%{
filter: brightness(1);
}
}
selector svg{
animation: rotate 20s linear infinite;
}
@-webkit-keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
selector {
background-color: transparent;
background-image: linear-gradient(145deg,#1E2C44 0,#030C1E 90%)
}
selector::before {
content: "";
position: absolute;
top: 0px;
left: 0px;
/* COR DA BORDA */
background: linear-gradient(45deg, #05C2E0 10%, transparent 25%, transparent 75%, #05C2E0 90%);
/* ARREDONDAMENTO DA BORDA */
border-radius: 15px;
/* ESPESSURA DA BORDA */
padding: 0.8px;
-webkit-mask: linear-gradient(to right, #fff, #fff) content-box,
linear-gradient(to right, #fff, #fff);
mask: linear-gradient(to right, #fff, #fff) content-box,
linear-gradient(to right, #fff, #fff);
-webkit-mask-composite: xor;
mask-composite: exclude;
}