Color section change clor after scroll

Hey paoluccimarketing2015,

Thank you for the inquiry.

Yes, this should be possible. Insert a color section in the editor, apply the initial background color to it in the Styling tab, then go to the Advanced > Developer Settings toggle. Add the following class names in the Custom CSS Class field.

av-dynamic-color-section av-animated-when-almost-visible

In the Quick CSS field, add this css code.

#top .av-dynamic-color-section {
  opacity: 1;
  transition: all 1s;
}

#top .av-dynamic-color-section.av-animated-when-almost-visible.avia_start_delayed_animation {
  opacity: 1;
  background-color: red;
}

You can customize the transition background color in the second css rule above, which is set to the default red. The effect is much more visible when you add content above the color section or when the color section is located below the fold.

Best regards,
Ismael

Hi,

Thank you for the update.

You have to apply the “main color” manually in the element’s Styling > Background Colors > Background settings, and apply the “alternate color” by adjusting the css rule that we provided above. It is currently set to red at the moment.

Best regards,
Ismael