Carrossel passa com o Scroll

Classes utilizadas

				
					slide
scroller
				
			

Código JS

		
		    
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script> 

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script> 

<script>
    
const slides = document.querySelectorAll('.slide');
let isMobile = window.innerWidth <= 767; // Telas menores que 768 -> mobile

slides.forEach((slide, i) => {
    let angle = isMobile ? i * 10 : (i * 14) - 10;
    gsap.to(slide, {
        rotation: angle,
        transformOrigin: "0% 2300px",
    });
});

let speed = isMobile ? 50 : 20; // Velocidade mobile : pc
ScrollTrigger.create({
    trigger: '.scroller',
    start: "top top",
    end: "bottom bottom",
    onUpdate: (self) => {
        gsap.to(slides, {
            rotation: (i) => {
                let baseAngle = isMobile ? i * 10 : (i * 14) - 10;
                return baseAngle - self.progress * speed;
            }
        });
    }
});


</script>  
			  
			    
		
	

Torne-se um WebDesigner de Sucesso!

Pré-cadastro comunidade webhub

Obrigado!

Recebemos suas informações com sucesso! Vamos cadastrá-lo em nosso sistema de WebDesigners da WebHub e, em breve, notificaremos você sobre novos projetos.

Obrigado!

Recebemos suas informações com sucesso e estamos prontos para dar o próximo passo no seu projeto. Em breve, você receberá uma mensagem no WhatsApp ou Email para que possamos discutir os detalhes do desenvolvimento do seu site.

Recupere seu investimento

Se você for um completo iniciante, levará em média 1 a 2 meses para assistir todas as aulas básicas. Após isso, já estará apto a conseguir seus primeiros clientes. Acredite ou não, com apenas um site, que pode ser criado em 2 ou 3 dias, você já terá a chance de recuperar seu investimento com a comunidade!