Text Reveal on Scroll

Effect: Text appears letter by letter or word by word when scrolling.

How to implement:

Use Scroll Navigation widget to define steps.
Insert JetElements Animated Text widget.
Select an animation effect (e.g., Typewriter, Fade In, or Slide In).
Control animation speed and direction.
Sync it with the scroll speed using the delay settings.

💡 Best for hero sections, slogans, or feature descriptions.

Steps:

Add the Animated Text Widget (JetElements):
- Drag JetElements > Animated Text onto the page.
- Type your text (e.g., “Welcome to Our Website”).
Select an Animation Style:
- Choose Typewriter, Slide-in, or Fade-in animation.
- Adjust animation speed for a smooth reveal.
Add Scroll Navigation & Sync Sections:
- Use Scroll Navigation widget to structure content.
- Assign CSS IDs to trigger the text reveal in each section.

💡 Ideal for headers, branding messages, and storytelling sections.

				
					.reveal-text {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-text.visible {
  opacity: 1;
  transform: translateY(0);
}

				
					document.addEventListener("DOMContentLoaded", function() {
    let texts = document.querySelectorAll(".reveal-text");

    function revealTextOnScroll() {
        texts.forEach(text => {
            let textTop = text.getBoundingClientRect().top;
            if (textTop < window.innerHeight * 0.85) {
                text.classList.add("visible");
            }
        });
    }

    window.addEventListener("scroll", revealTextOnScroll);
    revealTextOnScroll();
});

How to Implement:

Add Animated Text in Elementor → Advanced > CSS Class → Add reveal-text.
Insert CSS code in Elementor > Custom CSS.
Insert JavaScript code in Elementor > Custom Code.

💡 Perfect for animated headlines and hero text effects.

Text Reveal on Scroll

How to implement:

Steps:

How to Implement:

There are no bots on this site.

WP Woman is powered by H.I.* only!