Fade-in Sections on Scroll

Effect: Sections gradually appear as the user scrolls.

How to implement:

Use Scroll Navigation widget to break the page into scrollable sections.
Enable Entrance Animation in Elementor for each section.
Select Fade In from the animation settings.
Adjust animation duration and delay to create a smooth transition.

💡 Best for storytelling pages, portfolios, or product showcases.

Steps:

Add Sections in Elementor:
- Open your Elementor editor.
- Add multiple sections for content.
Enable Scroll Navigation:
- Drag and drop the Scroll Navigation widget from JetElements.
- Assign each section a CSS ID (e.g., section-1, section-2).
- Add these CSS IDs in the Scroll Navigation widget settings.
Apply Fade-in Animation:
- Click on each section.
- Go to Advanced > Motion Effects.
- Set Entrance Animation to Fade In.
- Adjust Duration and Delay for smooth scrolling.

💡 This works well for story-driven or section-based web pages.

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

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

				
					document.addEventListener("DOMContentLoaded", function() {
    let sections = document.querySelectorAll(".reveal");

    function revealOnScroll() {
        sections.forEach(section => {
            let sectionTop = section.getBoundingClientRect().top;
            if (sectionTop < window.innerHeight * 0.8) {
                section.classList.add("visible");
            }
        });
    }

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

How to Implement:

Add a Section in Elementor → Go to Advanced > CSS Class → Add reveal.
Insert the above CSS code into Elementor > Custom CSS.
Insert the JavaScript code in Elementor > Custom Code (set to “Before Body”).
Save and test scrolling.

💡 Best for revealing content sections in a smooth transition.

Fade-in Sections on Scroll

How to implement:

Steps:

How to Implement:

There are no bots on this site.

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