Nesta publicação, você encontrará os trechos de código (CSS, JS e GSAP) utilizados ao longo das aulas do curso de Elementor na Academia Hostnet. Eles foram organizados por aula para facilitar a consulta e a aplicação direta em seus projetos. Use como apoio para reforçar o que foi aprendido em cada módulo e explorar ainda mais os recursos avançados do Elementor.
Instrução: para garantir que o código seja copiado corretamente, utilize o botão de copiar no canto superior direito da área onde o código se encontra. Certifique-se também de que seu navegador não fez nenhuma tradução de qualquer parte do código.
Aula 67: Criando Seção com Rolagem Horizontal Usando GSAP
<style>
html, body {
overflow-x: hidden;
}
.secao-horizontal {
transition: 0s !important; /* Corrige bug de transição indesejada no Elementor */
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
gsap.registerPlugin(ScrollTrigger);
const container = document.querySelector(".secao-horizontal");
if (!container) return;
let animacao = null;
let resizeTimeout;
function iniciarScrollHorizontal() {
if (animacao) {
animacao.scrollTrigger.kill();
animacao.kill();
animacao = null;
}
if (window.innerWidth < 450) {
gsap.set(container, { x: 0 });
return;
}
const largura = container.scrollWidth - window.innerWidth;
animacao = gsap.to(container, {
x: -largura,
ease: "none",
scrollTrigger: {
trigger: container,
start: "top top",
end: `+=${largura}`,
scrub: true,
pin: true,
anticipatePin: 1,
invalidateOnRefresh: true
}
});
ScrollTrigger.refresh();
}
iniciarScrollHorizontal();
window.addEventListener("resize", () => {
clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(iniciarScrollHorizontal, 200);
});
});
</script>
