Projeto Rex

CSS Faixa de Luz Subtítulo

selector .elementor-widget-container{ background: linear-gradient(90deg, rgba(161, 235, 255, 0.00) 8.36%, rgba(161, 235, 255, 0.20) 51.07%, rgba(161, 235, 255, 0.00) 92.07%);
}

selector .elementor-widget-container:before{
    background: linear-gradient(90deg, rgba(161, 235, 255, 0.00) 20.36%, #D2F5FF 51.07%, rgba(161, 235, 255, 0.00) 80.07%);
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    z-index: 99;
    content: "";
    position: absolute
}

Títulos Degradê

selector h1{
    background: linear-gradient(92deg, rgba(255, 255, 255, 0.63) 0.21%, rgba(255, 255, 255, 0.90) 50.48%, rgba(255, 255, 255, 0.45) 99.79%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

Faixa Infinita

selector div{
    display: flex;
    width: 100vw;
    margin: 0 -5%;
    white-space: nowrap;
    
    transform: rotate(1deg);
}
selector .elementor-widget-container{
    background: rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(26px);
}



selector h2{
    font-size: 4vw;
    padding-left: 1.5vw;
    background: linear-gradient(92deg, rgba(255, 255, 255, 0.63) 0.21%, rgba(255, 255, 255, 0.90) 50.48%, rgba(255, 255, 255, 0.45) 99.79%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
    animation: textInfinito 7s infinite linear;
    font-family: "Clash", Sans-Serif
}

@keyframes textInfinito{
    to{
        transform: translateX(-100%);
    }
}

@media screen and (max-width:767px){
    selector h2{
    font-size: 7vw;
    padding-left: 3vw;
   
}
}

CSS Texto Animado

.txtMenor{
    font-size: 1.4vw;
    margin-right: 4vw;
    color: rgba(255,255,255, 0.6);
    font-weight: 300;
}


@media(max-width:1024px){
    .txtMenor{
        font-size:16px;
    }
} 

Código Js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>

<script src="https://unpkg.com/split-type"></script>

<script>
    addEventListener("DOMContentLoaded", () => {
        
        //Cards Cases
        
        const cards = document.querySelectorAll(".cardCase");
        const slides = document.querySelectorAll(".slide");

        cards.forEach((card, index) => {
            card.onclick  = () =>{
                console.log(index)
                const cardActive = document.querySelector(".cardCase.active");
                cardActive.classList.remove("active");

                card.classList.add("active");

                const slideActive = document.querySelector(".slide.active");
                slideActive.classList.remove("active");

                slides[index].classList.add("active")
            }
        })


        // Celular Mensagens

        const tl = gsap.timeline();

        tl.from(".mensagem", {
            opacity: 0,
            stagger: .3,
            scrollTrigger: {
                trigger: ".divCelular",
                start: "top 60%",
                end: "80% 60%",
                scrub: 2,
            }
        })


        // Cards Metodologia

        tl.from(".cardMtd", {
            opacity: 0,
            stagger: .3,
            filter: "blur(20px)",
            scrollTrigger: {
                trigger: ".divMtd",
                start: "20% 60%",
                end: "85% 60%",
                scrub: 2,
            }
        })

        // Cards Atendimento

        tl.from(".cardAtd", {
            opacity: 0,
            stagger: .3,
            filter: "blur(20px)",
            scrollTrigger: {
                trigger: ".divAtd",
                start: "20% 60%",
                end: "85% 60%",
                scrub: 2,
            }
        })

        // Texto Animado

        const splitTypes = document.querySelectorAll(".textoAnimado");

        splitTypes.forEach((char, i) => {
          const text = new SplitType(char, { types: "words, chars" });

          gsap.from(text.chars, {
            scrollTrigger: {
              trigger: char,
              start: "top 50%",
              end: "top top",
              scrub: 1,
            },
            opacity:0.3,
            stagger: 0.1,
          });
        });
    });
</script>