Section Color Change on Scroll

Effect: Background colors change when scrolling to different sections.

How to implement:

Use Scroll Navigation widget to trigger sections.
Apply JetTricks Sticky Section to make sections fixed while scrolling.
Use Dynamic Background Color (CSS or JetElements effects).
Configure Gradual Background Transition for a smooth shift.

💡 Best for branding pages, interactive experiences, or corporate presentations.

Steps:

Create Multiple Sections with Different Background Colors:
- Add multiple sections in Elementor.
- Assign each one a different background color.
Apply Sticky Section Effect:
- Click on the section.
- Go to Advanced > JetTricks and enable Sticky Section.
- Set Offset to trigger color changes at different scroll points.
Link with Scroll Navigation:
- Add Scroll Navigation widget.
- Assign section IDs and match transitions with color shifts.

💡 Great for interactive branding experiences and corporate presentations.

				
					.color-section {
  transition: background-color 1s ease-in-out;
}

.color1 {
  background-color: #ff4f4f;
}

.color2 {
  background-color: #4fa3ff;
}

				
					document.addEventListener("scroll", function() {
    let sections = document.querySelectorAll(".color-section");

    sections.forEach((section, index) => {
        let rect = section.getBoundingClientRect();
        if (rect.top < window.innerHeight * 0.5) {
            section.classList.add(index % 2 === 0 ? "color1" : "color2");
        }
    });
});

How to Implement:

Add multiple sections in Elementor.
Advanced > CSS Class → Add color-section.
Insert the CSS code in Elementor > Custom CSS.
Insert the JavaScript code in Elementor > Custom Code.

💡 Ideal for branding-focused or interactive pages.

Section Color Change on Scroll

How to implement:

Steps:

How to Implement:

There are no bots on this site.

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