# On-scroll Color Theme Switch

To bring more attention to a certain content you can create a section with color theme change effect when visitor is starting to scroll a section. Use .section-scroll-theme-switch class to create that effect on a section.

# Markup

<section
  class="section section-scroll-theme-switch bg-white-1"
  data-arts-theme-text="dark"
  data-arts-default-theme="bg-white-1"
  data-arts-scroll-theme="bg-dark-2"
  data-arts-scroll-theme-text="light"
  data-arts-scroll-offset="200"
  data-arts-scroll-trigger-hook="center"
  >
  ...
</section>

# Attributes

  • data-arts-theme-text=[ dark | light ] – default text color theme for the section.
  • data-arts-default-theme=[ bg-white-1 | class name ] – default background class of that section.
  • data-arts-scroll-theme=[ bg-dark-2 | class name ] – background class that the section will switch on scroll.
  • data-arts-scroll-theme-text=[ dark | light ] – text color theme that the section will switch on scroll.
  • data-arts-scroll-offset=[ 200 | integer ] – vertical offset for the animation start in pixels. Accepts both positive and negative values
  • data-arts-scroll-trigger-hook=[ center | top | bottom ] – defines the position of the animation trigger hook in relation to the viewport.

# Showcase

  • 📄 017-portfolio-details-masthead-fullwidth-horizontal.html
  • 📄 021-portfolio-details-masthead-boxed-vertical.html