Manu Martínez Marketing

Efecto de texto en scroll vertical – Elementor PRO

¡Hey equipo! Les comparto el código CSS y el Java para sacar el efecto de texto en scroll vertical.
Sí aún no tienen Elementor PRO, me ayuda bastante si adquieren la licencia con mi link de afiliado 🤜.


 selector .elementor-heading-title {
  color: rgb(182, 182, 182, 0.15);
  background: linear-gradient(to right, #377ee6, #00d0ed, #32e5e1) no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  background-size: 0%;
  transition: background-size cubic-bezier(.5,.5,.5,1) 0.6s;
  position: relative;
 }

Javascript


<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
<script>
    gsap.registerPlugin(ScrollTrigger);
const textElements = gsap.utils.toArray('.elementor-heading-title');
textElements.forEach(text => {
  gsap.to(text, {
    backgroundSize: '100%',
    ease: 'none',
    scrollTrigger: {
      trigger: text,
      start: 'center 90%',
      end: 'center 50%',
      scrub: true,
    },
  });
});
</script>

¿Necesitas ayuda con un proyecto web o de marketing digital?

Suscríbete

GoBaby quiere acompañarte en cada una de las etapas de tu bebé.

Suscríbete a nuestro newsletter.