Classes utilizadas
titulo1
titulo2
texto
imgDireita
botao
divCards
card
botaoSeta
CSS Container Pai
selector{
height: 100vh
}
CSS Degrade Título1
.txtDegrade{
background: linear-gradient(100deg, #9F35A9 9.95%, #F5A3C2 51.37%, #411BA0 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
CSS Botão
selector .elementor-button svg{
width: 44px
}
selector .elementor-button{
background: linear-gradient(101deg, #9F35A9 -1.92%, #C258DD 52.15%, #411BA0 108.43%), #535A1E;
}
selector .elementor-button-content-wrapper{
display: flex;
align-items: center;
}
CSS Card
selector .elementor-button svg{
width: 44px
}
selector .elementor-button{
backdrop-filter: blur(16px)
}
selector .elementor-button-content-wrapper{
display: flex;
align-items: center;
}
CSS Container Direita
selector.elementor-element{
flex: 1;
}
CSS Imagem Direita
selector{
height: 100%
}
Código Js
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>
<script>
const tl = gsap.timeline({defaults: {
duration: .5
}});
tl.from(".titulo1", {
opacity: 0,
y: 20,
})
.from(".titulo2", {
opacity: 0,
y: 20,
}, "-=.2")
.from(".texto", {
opacity: 0,
duration: 1
}, "-=.2")
.from(".imgDireita", {
height: 0
}, "-=.6")
.from(".botaoSeta", {
opacity: 0
})
.from(".botao", {
opacity: 0
}, "<")
.from(".divCards", {
width: 0,
padding: 0
})
.from(".card", {
opacity:0,
y:16,
stagger: .3
})
</script>
