On Scroll Color Switcher

The “On Scroll Color Switcher” element enables easy configuration of a scrolling effect that alters the background color of a webpage as you scroll. Additionally, it empowers you to modify the color of various other elements, which can be designated using any valid CSS selector.

Design Tab

Default Styles

• Default Background Color: The default background color of the page.

Triggers

• Triggers: The list of trigger targets
  • Background Color Trigger > Selector: The CSS Selector of a valid element on the page that should be used as a trigger when it enters the viewport
  • Background Color Trigger > Background Color: The background color to use
  • Color Target > Selector: ( optional ) The CSS selector for all elements that should have the color property changed with this trigger
  • Color Target > Color: The color to use
  • Viewport Trigger Location: The viewport location when the animation happens. When the top of the element defined in the trigger reaches this location in the viewport, the animation is run
  • Transition Duration: The duration of the animation in seconds

Builder Helpers

• Click to Refresh Targets: Refresh the On Scroll Color Switcher element. This can be useful when you make changes to one of the defined target elements themselves and you see discrepancies in the element’s behavior